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>. &nbsp; <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的语法,不知何故。