Node Express应用中jQuery点击事件监听绑定失效问题咨询

问题原因 #

第二种绑定方式失效的核心原因是执行绑定代码时，#dialog-continue元素还没有被渲染到DOM树中。

两种绑定逻辑的差异 #

• 第一种写法使用了jQuery的事件委托机制：事件被绑定在始终存在的document对象上，点击事件冒泡到document时，jQuery会自动校验触发事件的元素是否匹配选择器#dialog-continue，匹配就执行回调。无论#dialog-continue是绑定代码执行前就存在，还是后续动态插入DOM的（比如Express视图异步渲染、弹窗组件动态生成、接口返回后才渲染元素等场景），都能正常触发回调。
• 第二种写法是直接绑定事件到目标元素：执行$('#dialog-continue').on('click', ...)时，jQuery会先查询当前DOM中所有匹配#dialog-continue的元素，仅给查询到的、已经存在的元素绑定事件。如果此时元素还未生成（比如绑定代码写在元素渲染逻辑之前、元素是触发其他操作后才生成的弹窗内节点），查询结果为空，就没有绑定上任何事件，后续元素生成后点击也不会触发回调。

解决方案 #

如果#dialog-continue是动态生成的元素，优先使用事件委托写法，可将委托节点绑定到离目标元素最近的、静态存在的父节点上，性能优于绑定到document：

// 示例：#dialog-container是弹窗外层容器，页面初始化时就已存在
$('#dialog-container').on('click', '#dialog-continue', function () {
    alert('here')
});

如果确认元素是页面初始化时就静态渲染的，将绑定代码放到DOM加载完成的回调中即可：

// DOM全部渲染完成后再执行绑定逻辑
$(function() {
  $('#dialog-continue').on('click', function () {
      alert('here')
  });
})

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