为何使用.html()后onClick事件可注册，click()却不行？附解决方案

一、为什么直接用.click()和事件委托on()行为不同？ #

根据jQuery文档说明：

此外，jQuery在替换子元素前会移除其数据和事件处理程序等结构。

两种绑定方式的核心差异在于：

• 直接绑定.click()：事件处理函数会直接绑定到页面当前已存在的.page元素（或其子元素）上。如果后续用.html()替换了.page的子内容，原来绑定在子元素上的事件会随着子元素被移除而失效；如果.page元素本身被替换/移除，绑定在它身上的事件也会直接失效——因为事件是和具体DOM节点绑定的，节点消失，事件就不存在了。
• 事件委托$('body').on('click', '.page', ...)：事件实际绑定在body这个不会轻易被移除的父元素上，通过事件冒泡机制来响应点击。不管.page是页面初始化时就存在，还是后续动态生成/替换的，只要点击的元素匹配.page选择器，就能触发事件。这也是你当前代码能正常运行的原因。

二、如何确保事件正常注册（不使用onClick）？ #

最推荐且可靠的方案就是使用事件委托，建议选择离目标元素最近的、固定存在的父容器作为事件绑定对象（比绑定到body性能更优），示例代码如下：

假设.page的父容器是<div class="page-container">，代码可以写为：

$('.page-container').on('click', '.page', function() {
  var news = Math.floor((Math.random() * 10) + 1);
  $(this).html(news);
});

如果没有合适的就近父容器，绑定到body也是可行的（即你当前的写法）。这种方式不需要在每次替换内容后重新绑定事件，完全规避了DOM元素替换导致的事件失效问题。

如果确实有特殊场景需要直接绑定，那每次调用.html()完成内容替换后，必须重新调用.click()来绑定事件，但这种方式繁琐且容易遗漏，不推荐使用。

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