修复使用 JS 添加的元素无法点击的问题

Posted on Wed, 25 Dec 2024 16:16:12 +0800 by LiangMingJian

BUG 描述 #

javascript 在使用append()添加元素后，该元素的点击事件无法被监听生效。

Resolution #

由于动态加载的元素是在css, js代码加载完后才添加的，因此当浏览器在解析javascript 代码时，这些动态添加的元素并未生成，从而无法绑定相应的事件，完成对事件进行监听。

因为body这个元素是最早加载的一个元素，因此我们可以通过对body绑定事件来完成目标元素事件的绑定。

$("body").on("click", '.addBtn', function(){
    alert('new')
})