Question

我有以下代码：

$(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
};

需要抓住＆＃34;价值＆＃34;单击此按钮时。

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

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

重复的按钮不起作用click（）;

1 个答案: