jQuery动态添加按钮的绑定点击事件失效

前端设计发布于2020-10-20 热度(5920)

问题背景

在项目开发中，需要使用jQuery动态添加html中包含按钮，但该按钮的绑定点击事件失效。

按钮失效代码：

//$("#tourist-items").append(html);

$('.edit').click(function(){
	console.log('111111');
})

append中的节点是在整个文档加载完之后开始添加，因此页面不会为append的元素初始化添加点击事件

使用事件委托的方式，将指定的事件绑定在document上，代码如下

$(document).on('click', '.edit', function(){
	console.log('111111');
})

格式如下

$(document).on('事件名称', '操作的元素', function(){
	需要执行的逻辑
})

jQuery动态添加按钮的绑定点击事件失效 - YangJunwei