jQuery live/on方法alert正常但addClass仅静态元素生效问题求助

一、jQuery 1.7.2中live()调用addClass失效的原因 #

首先得明确：live()是事件委托专用方法，它的核心作用是为当前页面存在的、以及未来动态创建的元素绑定事件处理函数，而不是直接执行DOM操作（比如添加类）。

你能成功用live()触发alert()，肯定是把alert()放在了事件处理函数里（比如绑定了click事件），但如果错误地尝试直接用live()去调用addClass()（比如写成$('.my-link').live(addClass('active'))），这完全不符合live()的语法规则，自然不会生效。

二、用live()实现addClass功能的正确姿势 #

live()只能通过绑定事件来触发addClass操作，比如在元素被点击、鼠标悬停等事件发生时添加类：

// 示例：为当前及未来的.dynamic-link元素绑定click事件，点击时添加highlight类
$('.dynamic-link').live('click', function() {
  $(this).addClass('highlight');
});

如果是需要页面加载时就为动态元素添加类，live()做不到（因为它只处理事件），这种情况推荐在动态创建元素的代码中直接调用addClass：

// 创建动态链接时直接添加类
var newLink = $('<a href="#" class="dynamic-link">新链接</a>').addClass('highlight');
$('body').append(newLink);

三、jQuery 2.2.4中on()方法addClass仅对非动态元素生效的原因 #

这是因为你用on()的方式不对！on()实现事件委托必须指定静态父元素（页面加载时就存在的元素），如果直接写成：

// 错误写法：仅对绑定事件时已存在的元素生效
$('.dynamic-link').on('click', function() {
  $(this).addClass('highlight');
});

这种写法和直接绑定事件一样，不会对后续动态创建的元素生效。

四、on()实现动态元素addClass的正确写法 #

把事件绑定到一个静态父元素上（比如body、或者更接近目标元素的静态容器），然后指定目标选择器：

// 正确写法：委托给静态父元素，匹配所有当前及未来的.dynamic-link元素
$('body').on('click', '.dynamic-link', function() {
  $(this).addClass('highlight');
});

这样不管是页面初始的元素，还是后来动态创建的元素，只要匹配.dynamic-link选择器，触发事件时都会执行addClass操作。

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