将事件侦听器添加到动态添加的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）时，为什么不再形成按钮。

我用谷歌搜索并发现使用“.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事件附加到body元素，并使用.btnx选择器。这样，代码将适用于您拥有的每次点击，也适用于您添加的新元素。