jquery - jQuery DOM 选择类元素时出现问题

Question

我有以下 html:

<li class="active active-tab">
    <span class="text">Tab 1</span>
</li>
<li class="next next-tab">
    <span class="text">Tab 2</span>
</li>

以及以下 jquery:

$('.next-tab').click(function() {
    $('.active-tab').addClass( 'prev prev-tab' );
    $('.active-tab').removeClass('active active-tab');
    $('.next-tab').addClass('active active-tab');
    $('.next-tab').removeClass('next next-tab');
});

$('.prev-tab').click(function() {
    $('.active-tab').addClass( 'next next-tab' );
    $('.active-tab').removeClass('next active-tab');
    $('.prev-tab').addClass( 'active active-tab' );
    $('.prev-tab').removeClass('prev prev-tab');
});

当我单击 .next-tab li 元素时，它确实将第一个 li 元素更改为具有类 prev prev -tab.

但是，当我单击第一个 li 元素时，该元素现在具有 prev prev-tab 作为类，它不会执行 jQuery，即使它已声明在脚本中。

为什么按下具有 prev prev-tab 的 li 元素时 $('.prev-tab').click(function() 不执行>?

为了方便错误诊断，我创建了这个 jsFiddle (需要网络控制台:))

Answer 1

发生这种情况是因为在 document 加载时，prev-tab 类没有可用的元素。为了解决这个问题，您需要将这些元素放在包装器中并使用 on()包装器上的事件如下 -

$('.next-tab').click(function() {
    $('.active-tab').addClass( 'prev prev-tab' );
    $('.active-tab').removeClass('active active-tab');
    $('.next-tab').addClass('active active-tab');
    $('.next-tab').removeClass('next next-tab');
});

$('body').on('click', '.prev-tab', function() {
    $('.active-tab').addClass( 'next next-tab' );
    $('.active-tab').removeClass('active active-tab');
    $('.prev-tab').addClass( 'active active-tab' );
    $('.prev-tab').removeClass('prev prev-tab');
});

请注意，我在这里使用了 body，但您可以使用任何其他元素，只要它是您需要触发此事件的 DOM 元素的父元素即可。

在这里更新了 JS Fiddle - https://jsfiddle.net/afqsz861/3/