当我重命名类时，jQuery 似乎不起作用

Question

为什么当我将名称类名更改为新名称时，jQuery 似乎不起作用。然而 CSS 工作得很好:

$(document).ready(function(){

    $('.span_new_msgs').click(function(){
         $(this).removeClass('span_new_msgs').addClass('span_msgs');
   });

    $('.span_msgs').click(function(){   
        alert("hello"); // do something     
    });
});

Answer 1

问题是每个跨度的类仅在附加事件处理程序时才会被考虑。如果该类稍后发生更改，则处理程序不会更改以反射(reflect)这一点。

一种解决方案是使用委托(delegate)事件:

$(document).on("click", '.span_new_msgs', function(){
     $(this).removeClass('span_new_msgs').addClass('span_msgs');
});

$(document).on("click", '.span_msgs', function(){
     alert("hello");
});

通过这种方式，处理程序将附加到文档元素，并在单击时检查单击目标的类以确定会发生什么。

但是，就我个人而言，我更倾向于采取不同的做法:仅使用一个类并将“is new”标志存储在其他位置，例如在 HTML5 数据属性中:

$(document).on("click", '.span_msgs', function(){
    var $this = $(this);
    if ($this.attr('data-new')) {
        $this.removeAttr('data-new');
    }
    else {
        alert("hello");
    }
});

使用此方案，"new"消息范围将是 <span class="span_msgs" data-new>...</span> ，而“旧”的则会缺少 data-new属性。

您可以根据属性是否存在，使用 CSS 选择器轻松选择元素；唯一的区别是在讨论消息跨度时只需要考虑一类。