点击事件不适用于动态添加的按钮答案

【问题标题】：Click event is not working for dynamically added button点击事件不适用于动态添加的按钮
【发布时间】：2014-07-28 19:01:42
【问题描述】：

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

注意：由于Binding to multiple view models nested in the Dom 中提到的剑道控制要求，我们不能将函数移到 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>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

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

【讨论】：

或者使用单引号。
你说的是真的，但我在这里遗漏了什么吗？ OP 中是否没有正确使用引号？
Oriol 再次谈到了内联事件监听器（例如 <input type="text" onclick="this_is_an_inline_listener()" />）——不要使用它们。始终将您的 js/jQuery 拆分为 <script></script> 标签，或者更好的是，拆分为单独的 my_page_name.js 文档。 +1 奥先生。
@gibberish OP 已编辑，修正了引号。现在我不知道这是不是在提问时打错了，我应该删除我的答案的那部分。
@Oriol 也许是的，因为即使查看 OP 修订历史，引号也是正确的。 OP 必须立即修复它。 :)

【解决方案2】：

当您将代码注入 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/

【讨论】：

注意这种方法性能更差，因为它会检测整个文档的点击事件。不要使用document，而是尽可能使用最小的包装器，或者仅将事件处理程序添加到目标元素（在创建它们之后）。
@Oriol 说得对——您应该将事件处理程序绑定到最低元素（通常是注入代码的元素：$(".statiscDIV").on(...)），但在大多数情况下（至少是适度的我工作过的网站）使用$(document).on(... 对性能的影响并不显着。此外，document.on 将总是工作，而找到要使用的 BEST 元素可能需要试验。但是，Oriol 是正确的。这是否重要取决于您的网站。
@lijo - 除非我遗漏了什么，否则您在原始问题中使用引号是/是正确的。使用单引号还是双引号很少很重要（JSON 是例外之一 - 您必须始终对 JSON 中的字符串使用双引号，并且可能还有一两个其他实例）...但是通常没关系——只要（1）你使用相同类型的引号开始/结束一个字符串，（2）使用其他类型的引号（或转义引号）如果您在带引号的字符串中需要额外的引号。但保持一致是一个好习惯（所以任何错误都会跳出来）。

【解决方案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");

}

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：