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

Posted

技术标签:

【中文标题】点击事件不适用于动态添加的按钮【英文标题】：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 之外

更新的参考文献

    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

代码

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

【问题讨论】：

【参考方案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 再次谈到了内联事件监听器（例如 &lt;input type="text" onclick="this_is_an_inline_listener()" /&gt;）——不要使用它们。始终将您的 js/jQuery 拆分为 &lt;script&gt;&lt;/script&gt; 标签，或者更好的是，拆分为单独的 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);

【讨论】：

以上是关于点击事件不适用于动态添加的按钮的主要内容，如果未能解决你的问题，请参考以下文章

JQuery .on() 没有将点击事件绑定到动态创建的元素[重复]

单击事件不适用于以编程方式/动态创建的选项按钮

jquery如何添加动态点击事件？

Safari：<label> 元素中的 SVG 似乎不适用于“点击”事件

js如何给按钮添加点击事件

Android 动态添加Button，点击事件不管用