Question

我有一些按钮，并且使用jQuery在所有按钮上都添加了一些点击行为，并且效果很好，但是现在这些按钮是通过使用脚本更改div的innerHTM L来动态生成的，行为不再起作用

这里是一个示例，每次我单击两个按钮中的任何一个时，都将显示一个带有消息'clicked'的警报。

$('.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>

但是如果我通过使用按钮generate来更改home的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”类的新元素都不会具有该处理程序。要么将它们手动添加到新元素中，要么更好地使用委托。

基本上，由于您的“ foo”元素直到单击“生成”后才存在，因此对.on()的调用将没有添加处理程序。

这是使用jQuery的委托实现的解决方案

 $(".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>

使用jQuery，无法为使用innerHTML创建的按钮添加点击行为

1 个答案: