动态生成元素点击事件失效求助：.edit元素点击无响应

这问题我碰到过好多次啦，大概率是动态生成元素的事件绑定时机不对导致的，咱们一步步拆解原因和解决办法：

核心原因 #

你是先通过函数动态生成了这段HTML：

<span class="edit"> <i class="fa fa-pencil" aria-hidden="true"></i> </span>

之后才执行$(".edit").on('click', ...)来绑定点击事件。但jQuery的直接事件绑定（比如$('.selector').on('click')）只会给绑定事件时已经存在于DOM中的元素生效，动态新增的元素不会自动继承这个事件绑定——简单说就是绑定事件的时候，你的.edit按钮还没被加到页面上呢，自然监听不到点击。

解决办法：用事件委托 #

事件委托是把事件绑定到一个已经存在的父元素（比如document，或者你这个.edit元素的直接父容器），利用事件冒泡机制，父元素会捕获到子元素的点击事件，哪怕子元素是后来才生成的。

示例代码（通用版） #

用document作为委托对象，适合不确定父容器的情况：

$(document).on('click', '.edit', function(){
  // 这里写你的编辑任务逻辑
  alert("The check was clicked.");
});

更高效的写法（推荐） #

如果知道.edit元素的父容器（比如父容器的class是.task-list），直接绑定到父容器上，比绑定到document性能更好：

$(".task-list").on('click', '.edit', function(){
  alert("The check was clicked.");
});

其他可能的排查方向 #

• 检查控制台有没有报错：比如有没有$ is not defined，这说明jQuery没加载成功；
• 有没有其他JS代码阻止了事件冒泡：比如其他点击事件里用了event.stopPropagation()或者return false，导致事件到不了你的.edit元素；
• 核对class拼写：生成的HTML里是class="edit"，绑定的时候有没有写错成edits或者其他？

内容的提问来源于stack exchange，提问作者user9043678