jquery - 为什么这个添加和删除类在 JQuery 中不起作用？

Question

为什么这不起作用？我快要疯了。

            <span class="fav"></span>

            $('.fav').on('click', function() {
                $(this).addClass('item-selected');
            });

            $('.fav.item-selected').on('click', function() {
                $(this).removeClass('item-selected');
            });

下面是完整的代码。这是无法撤消的第二部分。

        $('.fav').on('click', function() {
            $(this).addClass('item-selected').next('span.notification').toggleClass('show-notification').html("Hello world!");
            setTimeout(function(){
                $('.show-notification').removeClass('show-notification');
            },4000);
        });

        $('.fav.item-selected').on('click', function() {
            $(this).removeClass('item-selected').next('span.notification').toggleClass('show-notification').html("Goodbye world!");
            setTimeout(function(){
                $('.show-notification').removeClass('show-notification');
            },4000);
        });

Answer 1

当您声明 .fav 元素动态附加到 DOM 时，您需要使用委托(delegate)事件处理程序。另请注意，当您在连续单击时切换类时，您不需要多个处理程序；你可以只使用toggleClass()。试试这个:

$('#container').on('click', '.fav', function() {
  $(this).toggleClass('item-selected');
});

.item-selected {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <span class="fav">Item</span>
  <span class="fav">Item</span>
  <span class="fav">Item</span>
  <span class="fav">Item</span>
</div>