Question

我有一个元素作为.collapsed类，点击这个后，jQuery函数删除了这个类并添加了.expanded。

在移除.collapsed后点击该元素时，它仍会运行我已创建的功能。

HTML

<div class="collapsed">
Some content that will be changed
</div>

JS

$(document).ready(function() {

    function expandItem() {
            $(this).addClass("expanded");
            $(this).removeClass("collapsed");
        return false;
    }

    $('.collapsed').click(expandItem);

});

Answer 1

您需要使用event delegation，否则只有在执行代码$('.collapsed').click(expandItem);时才对选择器进行一次评估。之后对dom结构所做的更改不会影响已添加的处理程序。

当您使用事件委托时，传递的选择器会在事件发生时进行延迟评估，因此会对注册后所做的更改做出反应。

function expandItem() {
    $(this).addClass("expanded");
    $(this).removeClass("collapsed");
    return false;
}

$(document).on('click', '.collapsed', expandItem);

JS仍然引用已被删除的类

1 个答案: