Question

我参考了Creating a div element in jQuery并使用javascript创建了一个div元素。但是，当我动态添加按钮元素时，单击不起作用。我们需要做些什么改变才能使按钮点击工作？

注意：由于Binding to multiple view models nested in the Dom

中提到的剑道控制要求，我们无法将该功能移到document.ready之外

更新了参考文献

Wiring up click event using jQuery on() doesn't fire on injected HTML via Ajax call
how to attach jquery event handlers for newly injected html?
After injecting html by jquery, the event handlers doesn't work with/without delegate

CODE

<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>

Answer 1

当您将代码注入DOM时，jQuery事件处理程序不会附加/绑定到新元素。（在注入新代码之前，jQuery已经对DOM元素进行了绑定）。因此，当您单击按钮时，不会捕获jQuery单击事件。

要附加事件处理程序（从而从中获取事件）注入的元素，必须使用jQuery .on()，如下所示：

jsFiddle Demo

$(".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");

}

jQuery 1.7中添加了.on()方法来替换bind()，.delegate()和.live() - 它与所有这些方法完全相同。（要从任何DOM元素取消绑定事件处理程序，请使用.off()）

来源：http://api.jquery.com/on/

Answer 2

您必须使用\转义引号，或混合单引号和双引号：

"<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);

Demo

Answer 3

 $(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");

}

Answer 4

虽然已经很晚了，但未来可能对某人有所帮助。

当动态添加元素/类/ Id时，您还需要添加事件侦听器。同样，如果删除它，那么附加到它的事件侦听器也会被删除。

所以要么在添加新元素时添加事件侦听器（这不是一个好方法），要么像我这样使用jQuery的on方法：

$(document).on('click','class or id', function);

Click事件不适用于动态添加按钮

4 个答案: