jQuery 动态绑定

Unsplash

这是在项目过程中所遇到的一个问题，给 JS 动态生成的元素绑定事件失效，代码如下所示：

$(".more-btn").on('click', function() {
    console.log("peace and love")
};

其中，more-btn 按钮是通过 layer 模块动态生成的，而我们在按钮上绑定的点击事件却没能生效，这是因为 DOM 节点还没有渲染出来，我们就将点击事件就绑定上了

而通过查阅 jQuery 的 API 文档，on() 方法是支持给动态元素绑定事件的，即事件委托模式，我们首先要获取需要绑定的 selector 的父级元素或祖先元素，比较简单粗暴的办法就是使用 body 或者 document，然后在你绑定的事件后面跟上你的 selector 即可，代码如下所示：

$(document).on('click',".more-btn", function() {
    console.log("peace and love")
};