Click事件不适用于动态添加的按钮
我反对在jQuery中创建div元素并使用javascript创建div元素。 但是，当我动态添加一个按钮元素时，单击不起作用。 我们需要做些什么才能使按钮点击工作？
注意：由于绑定到嵌套在Dom中的多个视图模型中提到的kendo控件需求，我们无法将该功能移到document.ready之外
更新的参考
码
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script type="text/javascript">
//lijo
$(document).ready(function ()
{
$(".statiscDIV").append('<div>FIRST</div>');
$(".statiscDIV").append('<div>hello <button class="MakeHoldDetailLinkButton" onclick = "showMakeAndHold();">View</button> </div>');
//lijo
function showMakeAndHold()
{
alert("HIIIIIII");
}
});
</script>
</head>
<body>
<div class="statiscDIV">
A
</div>
</body>
当您向DOM注入代码时，jQuery事件处理程序不会附加/绑定到新元素。 （在注入新代码之前，jQuery已经完成了与DOM元素的绑定）。 因此，当你点击一个按钮时，没有jQuery点击事件被困住。
要附加事件处理程序（从而抓取事件）注入的元素，您必须使用jQuery .on() ，如下所示：
jsFiddle演示
$(".statiscDIV").append('<div>FIRST</div>');
$(".statiscDIV").append('<div>hello <button class="MakeHoldDetailLinkButton">View</button> </div>');
$(document).on('click','.MakeHoldDetailLinkButton',function(){
showMakeAndHold();
});
function showMakeAndHold() {
alert("HIIIIIII");
}
.on()方法在jQuery 1.7中添加以替代bind() .delegate()和.live() - 它与所有这些方法都做同样的事情。 （要从任何DOM元素中解除事件处理程序的绑定，请使用.off() ）
来源：http://api.jquery.com/on/
你必须用避开你的引号，或者混合使用单引号和双引号：
"<div>hello <button class="MakeHoldDetailLinkButton" onclick="showMakeAndHold();">View</button> </div>"
'<div>hello <button class='MakeHoldDetailLinkButton' onclick='showMakeAndHold();'>View</button> </div>'
'<div>hello <button class="MakeHoldDetailLinkButton" onclick="showMakeAndHold();">View</button> </div>'
"<div>hello <button class='MakeHoldDetailLinkButton' onclick='showMakeAndHold();'>View</button> </div>"
另一个问题是您使用内联事件侦听器。 那些运行在全局上下文中，所以不能运行在闭包中声明的函数。
要么使showMakeAndHold成为全局函数，要么更好地添加事件侦听器：
$(".statiscDIV")
.append('<div>FIRST</div>')
.append('<div>hello <button class="MakeHoldDetailLinkButton">View</button></div>')
.find('button').on('click', showMakeAndHold);
演示
$(document).ready(function (){
$(".statiscDIV").append('<div>FIRST</div>');
$(".statiscDIV").append('<div>hello <button class="MakeHoldDetailLinkButton" onclick = "showMakeAndHold();">View</button> </div>');
});
//lijo
function showMakeAndHold(){
alert("HIIIIIII");
}
上一篇: Click event is not working for dynamically added button