我有一些按钮,我用 jQuery 添加了一些点击行为到所有按钮上,它们工作正常,但现在这些按钮是通过更改 div 的 innerHTM
L 动态生成的脚本,该行为不再有效
这是一个例子,每次我点击这两个按钮中的任何一个时,它都会显示一 strip 有消息 '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>
但是,如果我通过使用按钮生成更改主页的 innerHTML
来插入按钮,它就不再起作用了
$(".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>
我真的不知道发生了什么
最佳答案
$('.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>
关于javascript - 使用 jQuery,无法将单击行为添加到使用 innerHTML 创建的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57541641/