jquery – 点击事件不适用于dynamic创build的button
我的要求是创build数量等于json数组计数的button。 我成功地在jQuery中dynamic创buildbutton。 但是，jQuery的.ready函数中的方法不会被用于点击操作。 我试图在SOsearch。 find一些解决scheme，但没有为我工作。 我对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>
dynamic创buildbutton是因为如果使用jquery 1.7，您需要使用.live()方法调用它们
但是这个方法在新版本中被弃用（你可以在这里看到所有被弃用的方法的列表）。 如果你想使用jQuery 1.10或更高版本，你需要这样调用你的button：
$(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 });
我的猜测是，当你绑定button时，你创build的button还没有在页面上。 绑定$.getJSON函数中的每个button，或者使用如下的dynamic绑定方法：
$('body').on('click', 'button', function() { ... });
注意你可能不想在'body'标签上做这个，而是把button换成另一个div或者其他东西，然后调用它。
jQuery的方法
简单易行的方法就是在事件上使用：
$('body').on('click','#element',function(){ //somthing });
但是我们可以说这不是最好的办法。 我build议另一种方法来做到这一点是使用clone（）方法，而不是使用dynamichtml。 在你的文件中写一些html例如：
<div id='div1'></div>
现在在脚本标记中创build这个div的一个克隆，那么这个div的所有属性也将跟随新的元素。 例如：
var dynamicDiv = jQuery('#div1').clone(true);
现在使用dynamicDiv元素，只要你想添加或者改变它的属性。 现在所有的jQuery函数都可以使用这个元素
你也可以用这种方式创buildinputbutton：
var button = '<input type="button" id="questionButton" value='+variable+'> <br />';
这可能是button创build的语法，不知何故。
