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()函数。你需要这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

对于动态生成的元素，直接JavaScript函数不适用于该元素。因此，您必须使用该动态生成的元素的父元素，或者您可以使用document而不是该父元素。

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

或者你也可以这样做：

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

Answer 3

这是因为您将click事件嵌套在html()函数中。

＆＃13;

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

＆＃13;

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

＆＃13;

将onclick功能分配给动态创建的按钮

3 个答案: