1

为什么当我将名称类名称更改为新名称时 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     
    });
});
4

2 回答 2

3

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

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

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

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

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

然而，我个人更倾向于做一些不同的事情：只使用一个类并将“是新的”标志存储在其他地方，例如在 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 选择器轻松选择元素；唯一的区别是在谈论消息跨度时只需要考虑一个类。

于 2013-07-06T20:48:58.423 回答
1

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

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

})
于 2013-07-06T20:48:34.733 回答