jquery - Click事件不适用于动态创建的按钮
jquery - Click事件不适用于动态创建的按钮
提问于 2013-12-29 05:20:30
我的要求是创建与json数组计数相等的按钮数量。我成功地在jquery中动态创建了按钮。但是点击操作不会调用jquery的.ready函数中的方法。我已经试着搜索过了。找到的解决方案很少，但对我来说都不起作用。我对jquery非常陌生。请帮帮我。
我的代码: jQuery：
$(document).ready(function()
{
currentQuestionNo = 0;
var questionsArray;
$.getJSON('http://localhost/Sample/JsonCreation.php', function(data)
{
questionsArray = data;
variable = 1;
//CREATE QUESTION BUTTONS DYNAMICALLY ** NOT WORKING
for (var question in questionsArray)
{
var button = $("<input>").attr("type", "button").attr("id", "questionButton").val(variable);
$('body').append(button);
//Tried using .next here - but it dint work...
//$('body').append('<button id="questionButton">' + variable + '</button>');
variable++;
}
displayQuestionJS(questionsArray[currentQuestionNo], document);
});
$("button").click(function()
{
if ($(this).attr('id') == "nextQuestion")
{
currentQuestionNo = ++currentQuestionNo;
}
else if ($(this).attr('id') == "previousQuestion")
{
currentQuestionNo = --currentQuestionNo;
}
displayQuestionJS(questionsArray[currentQuestionNo], document);
});
function displayQuestionJS(currentQuestion, document)
{
document.getElementById('questionNumber').innerText = currentQuestion.questionNumber;
document.getElementById('questionDescription').innerText = currentQuestion.quesDesc;
$('label[for=optionA]').html(currentQuestion.optionA);
$('label[for=optionB]').html(currentQuestion.optionB);
$('label[for=optionC]').html(currentQuestion.optionC);
}
HTML content
<form method="post" name="formRadio">
<label id="questionNumber"></label>.
<label id="questionDescription"></label> <br />
<input type="radio" id="optionA"> </input> <label for="optionA"></label> <br />
<input type="radio" id="optionB"> </input> <label for="optionB"></label> <br />
<input type="radio" id="optionC"> </input> <label for="optionC"></label> <br />
<button id="previousQuestion">Previous Question</button>
<button id="nextQuestion">Next Question</button>
<br />
<br />
<input type="submit" id="submitButton" name="submitTest" value="Submit"></input>
</form>编辑--示例.on方法代码-单独的文件:工作中--非常感谢
<script>
$(document).ready(function()
{
$("button").click(function()
{
var button = '<input type="button" id="button2" value="dynamic button">';
$('body').append(button);
});
});
$(document).on('click','#button2', function()
{
alert("Dynamic button action");
});
</script>
</head>
<body>
<button id="button">Static Button</button>
</body>回答 4
Stack Overflow用户
回答已采纳
发布于 2013-12-29 05:37:52
您可以动态创建按钮，因为如果使用jQuery1.7，则需要使用.live()方法调用这些按钮
但在较新的版本中，此方法已被弃用(您可以查看所有已弃用方法here的列表)。如果你想使用jquery 1.10或更高版本，你需要这样调用你的按钮：
$(document).on('click', 'selector', function(){
// Your Code
});例如
如果你的html是这样的
<div id="btn-list">
<div class="btn12">MyButton</div>
</div>您可以像这样编写jquery
$(document).on('click', '#btn-list .btn12', function(){
// Your Code
});Stack Overflow用户
发布于 2013-12-29 05:28:47
我的猜测是，当您绑定按钮时，您创建的按钮还没有出现在页面上。绑定$.getJSON函数中的每个按钮，或者使用动态绑定方法，如下所示：
$('body').on('click', 'button', function() {
...
});注意:你可能不想在'body‘标签上这样做，而是把按钮包装在另一个div或其他地方，并在上面调用on。
Stack Overflow用户
发布于 2015-11-20 18:47:52
最简单和最简单方法是在事件上使用：
$('body').on('click','#element',function(){
//somthing
});但我们可以说，这不是最好的方法。我建议另一种方法是使用clone()方法，而不是使用动态html。在你的文件中写一些html，例如：
<div id='div1'></div>现在，在script标签中，克隆这个div，然后这个div的所有属性都会跟上新的元素。例如：
var dynamicDiv = jQuery('#div1').clone(true);现在，您可以在想要添加元素或更改其属性的任何位置使用元素dynamicDiv。现在，所有jQuery函数都将使用此元素
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20819501
复制相关文章
相似问题