jquery - 点击事件不适用于动态创建的按钮 [英] jquery - Click event not working for dynamically created button
问题描述
我的要求是创建一些等于json数组数的按钮。我成功地在jquery中动态创建按钮。但jQuery的.ready函数中的方法不会被用于点击操作。我试图在SO中搜索。找到一些解决方案，但没有为我工作。我对jquery很新。请帮助...
My requirement is to create number of buttons equal to the json array count. I was successful in creating buttons dynamically in jquery. But the method in .ready function of jquery is not called for the click action. I have tried searching in SO. Found few solutions but nothing worked for me. I am very new to jquery. Please help...
我的代码：
jQuery：
my code: 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方法代码 - 单独文件：工作 - 感谢一下
EDIT -- Sample .on Method code - Separate file: WORKING - THANKS A LOT
<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>
推荐答案
您可以动态创建按钮，因为您需要致电他们与 .live（）方法，如果您使用jquery 1.7
You create buttons dynamically because of that you need to call them with .live() method if you use jquery 1.7
但此方法已被弃用（您可以看到新版本中所有不赞成使用的方法列表（此处）。如果你想使用jQuery 1.10或更高版本，你需要以这种方式调用你的按钮：
but this method is deprecated (you can see the list of all deprecated method here) in newer version. if you want to use jquery 1.10 or above you need to call your buttons in this way:
$(document).on('click', 'selector', function(){
// Your Code
});
举例
如果你的html是像这样
If your html is something like this
<div id="btn-list">
<div class="btn12">MyButton</div>
</div>
您可以像这样编写jquery
You can write your jquery like this
$(document).on('click', '#btn-list .btn12', function(){
// Your Code
});
这篇关于jquery - 点击事件不适用于动态创建的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
