javascript - 使用 jQuery，无法将单击行为添加到使用 innerHTML 创建的按钮

Question

我有一些按钮，我用 jQuery 添加了一些点击行为到所有按钮上，它们工作正常，但现在这些按钮是通过更改 div 的 innerHTML 动态生成的脚本，该行为不再有效

这是一个例子，每次我点击这两个按钮中的任何一个时，它都会显示一 strip 有消息 'clicked' 的警告。

Fiddle

$('.foo').on('click', function(){
    alert('clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="home">
    <button class='foo' > Test </button>
    <button class='foo' > Test </button>
</div>

但是，如果我通过使用按钮生成更改主页的 innerHTML 来插入按钮，它就不再起作用了

Fiddle

$(".gen").on("click", function(){
   $('.home').html(
     "<button class='foo' > Test </button>" +
     "<button class='foo' > Test </button>");
})


$('.foo').on('click', function(){
    alert('clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <button class="gen" > Generate  </button>
</div>

<div class="home">

</div>

我真的不知道发生了什么

Answer 1

$('.foo') 选择某些元素。 .on() 仅向选定元素添加事件处理程序。任何具有“foo”类的新元素都没有该处理程序。要么手动将它们添加到新元素，要么更好地使用委托(delegate)。

基本上，由于您的“foo”元素在您单击“生成”之后才存在，因此对 .on() 的调用不会添加任何处理程序。

这是一个使用 jQuery 委托(delegate)实现的解决方案

 $(".gen").on("click", function(){
   $('.home').html(
     "<button class='foo' > Test </button>" +
     "<button class='foo' > Test </button>");
})


$(document).on('click', '.foo', function(){
    console.log('clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <button class="gen" > Generate  </button>
</div>

<div class="home">

</div>