将事件侦听器添加到动态添加的HTML元素

Question

我有HTML

<input type="button" class="btnx" value="click me">

和附加的JS文件

$(".btnx").on("click",function(){
    var newbtn = "<input type='button' class='btnx' value='click me'>";
  $('body').append(newbtn);
});

当我点击按钮1时，新的按钮会附加到正文，但是当我点击新按钮（按钮2或按钮3）时，为什么不再形成按钮。

我用Google搜索并发现使用“.on（）”，但仍然无法弄清楚它为什么不起作用。

JSFiddle链接： https ：//jsfiddle.net/93k9emL1/

Answer 1

您可以使用$('body').on('click', '.btnx', ...) ：

 $("body").on("click", '.btnx', function(){ var newbtn = "<input type='button' class='btnx' value='click me'>"; $('body').append($(newbtn)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" class="btnx" value="click me"> 

关于您的代码的说明：

您的代码的问题是您添加到DOM树的新元素没有附加到它的click事件。
使这项工作的方法是将click事件.btnx到body元素，并使用.btnx选择器。 这样，代码将适用于您拥有的每次点击，也适用于您添加的新元素。