jquery - 将 onclick 函数分配给动态创建的按钮

Question

遵循最佳实践，使用回调函数并处理最初加载的父级 div，我这样做了:

$("#buttons_div").
html('<input type="button" value="Click me" id="button1" />', function() {
  $("#buttons_div").
  on("click", "#button1", function() {
    alert("alert")
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="buttons_div">
</div>

为什么这不起作用？

Answer 1

这行不通。这两个语句应该分开。您无法将事件处理程序作为参数传递给 .html() 函数。您需要这样做:

$(function() {
  $("#buttons_div").html('<input type="button" value="Click me" id="button1" />');
  $("#buttons_div").on("click", "#button1", function() {
    alert("alert")
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons_div">
</div>