重复的按钮不起作用 click();答案

【问题标题】：Duplicated button doesn't work click();重复的按钮不起作用 click();
【发布时间】：2016-02-21 13:23:33
【问题描述】：

我有以下代码：

$(document).ready(function(){

  var counter = 0;

  $("button").click(function() {
    $('body').append("<button>generate new element "+(counter++)+"</button>")
  });

});

JSFiddle

当你点击复制的按钮时，它不会再复制另一个按钮，除了原来的按钮只能工作。

为什么不能监听这个事件到重复的按钮？

已编辑：

//Click button event DELEGATION
$(document).on("click",".choice", function() {
  var userChoice = $(this).attr("value");
  //EXTERNAL SPAGUETTHI CODE
};

点击时需要获取该按钮的“值”。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您需要委托：捕获对父元素的点击，但仅捕获对按钮元素的点击。 $("button") 选择页面上的现有按钮，$(document)（您可以将 document 替换为您的按钮容器）将选择容器，并使用 $(document).click("button", ...) 您委托对按钮的点击。

$(document).ready(function() {
  var counter = 0;

  $(document).click("button", function(e) {
    var value = $(e.target).attr("data-value"); // or .data("value")
    alert(value);
    $('body').append("<button data-value=\"" + ++counter + "\">generate new element " + counter + "</button>")
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-value="initial-button">generate new element</button>

以下是我发布的其他一些类似答案：

【讨论】：

你有这个sn-p的替代品吗？在 ajax 内容之后，它会强制在没有用户输入的情况下单击按钮。
@Ivan 你说的它在没有用户输入的情况下强制点击按钮是什么意思，？通过执行click("button", fn) 你附加一个点击处理程序，你不点击按钮。要单击您使用的按钮$("button").click()。
我打算使用 $(this);你知道如何选择“按钮”而不是“文档”吗？
@Ivan 我不清楚你想要实现什么——你说你想捕捉新按钮上的点击。处理新按钮的点击不是您想要的吗？
我查了一下 on();它对我有用，但我需要知道如何修复 $(this).attr;更新我的问题，这条评论无法格式化代码。