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

问题是每个范围的类只在连接事件处理程序时才考虑。如果该类稍后更改，则处理程序不会更改以反映该类。

一种解决方案是使用委托事件：

$(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");
    }
});

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

您可以根据属性的存在轻松选择具有CSS选择器的元素;唯一的区别是在谈论消息跨度时只需要考虑一个类。

Answer 2

要访问与加载页面时具有不同类名的元素，请改用on函数。

$(document).on('click', '.span_new_msgs', function(){

})

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

2 个答案: