JQuery 元素在 removeClass/addClass 之后不受点击影响

Question

不确定如何解释，但这是 JS fiddle。 http://jsfiddle.net/1kLsoj6h/

如果您点击任何内容，然后返回 "Dashboard"，它不受影响。我不确定为什么会这样。这是代码：

$('#Dashboard').addClass('tabs_active').removeClass('tabs');

$('.tabs').click(function(){
    $('.tabs_active').addClass('tabs').removeClass('tabs_active');
    $(this).addClass('tabs_active').removeClass('tabs');
});

这是仪表板HTML

<div id="Dashboard" class="tabs ">
    <i class="fa fa-tachometer fw"></i>
    <span id="dash/dash.php" class="remove">Dashboard</span>
</div>

有人有什么想法吗？

Answer 1

改变这个

 $('#Dashboard').addClass('tabs_active').removeClass('tabs');

至此

  $('#Dashboard').addClass('tabs_active');

如果您从 #Dashboard 中删除 tabs class，$('.tabs').click(function(){ 事件将不会应用到它，也不会起作用。

演示：https://jsfiddle.net/1kLsoj6h/2/

Answer 2

您应该更改语句的顺序。当您在添加点击事件之前删除 tabs-class 时，#Dashboard 不会受到影响，因为它没有 tabs-class。

$('.tabs').click(function(){
    $('.tabs_active').addClass('tabs').removeClass('tabs_active');
    $(this).addClass('tabs_active').removeClass('tabs');
});

$('#Dashboard').addClass('tabs_active').removeClass('tabs');

或者，如果您喜欢这样（而不是最后一行），则只对 select 执行点击事件：

$('#Dashboard').trigger('click');

JQuery 元素在 removeClass/addClass 之后不受点击影响

JQuery element unaffected by click after removeClass/addClass

jquery

addclass

removeclass