Question

我有这种情况，我已经设法通过jquery删除必要的类，但是当用删除的类点击相同的div时，它仍然表现得好像没有删除类。

    <script>
    $(document).ready(function(){
    $('.next').click(function() {
    $(this).removeClass('next');
    alert('removed class');
    $(this).next().addClass('next');
    });

    });
    </script>
    </head>
    <body>

    <div style="width:500px;" class="siblings">
      <ul>ul (parent)  
        <li>li (sibling)</li>
        <li>li (sibling)</li>
        <li class="next">li (sibling with class name "next")</li>
        <li>li (the next sibling of li with class name "next")</li>
        <li>li (sibling)</li>
      </ul>   
    </div>

    </body>

基本上，如果你点击名为

的div

 li (sibling with class name "next")

它会提示您删除类“next”，然后从当前div中删除“next”类。但是，当您单击同一个div而没有“next”类时，即使该类已被删除，警报仍会运行！甚至更奇怪的是，当点击时，现在具有“下一个”类的兄弟div不会运行警报。

我的问题是，如何确保删除了类的div在单击时不会发出警报，并且单击新类的div会在单击时发出警告？

由于

Answer 1

您需要使用event delegation

$('.siblings').on('click', '.next', function () {
    $(this).removeClass('next');
    alert('removed class');
    $(this).next().addClass('next');
})

演示：Fiddle

为什么呢？当您使用正常的事件处理程序注册方式时，仅在事件注册期间评估关联的选择器，然后处理程序将附加到目标元素。之后，如果您更改与这些元素关联的任何属性，则不会影响已注册的处理程序。

在您的情况下，您需要动态评估选择器，这是事件委派派上用场的地方。

Answer 2

当您使用$('.next').click之类的事件附加事件处理程序时，事件处理程序将附加到您调用代码时具有class="next"的特定DOM元素集。如果稍后删除该类，则它不会以任何方式影响事件处理程序，因为它们已经附加到DOM元素。

如果您希望它以您描述的方式工作，您可以使用委托事件处理，而不是将事件处理程序附加到父对象，并将.on()与第二个选择器一起使用，并在事件的时间，如果第二个选择器在事件发生时仍为真，则只调用事件处理程序。委托事件处理如下所示：

$("ul").on("click", ".next", function() {
    // your code here
});

您可以在此处详细了解委派事件处理的工作原理：

Does jQuery.on() work for elements that are added after the event handler is created?

jQuery .on does not work but .live does

Answer 3

使用event delegation方法：

$(document).on('click','.next',function() {
$(this).removeClass('next');
alert('removed class');
$(this).next().addClass('next');
});

demo

jQuery无法删除类

3 个答案: