javascript - .removeClass() jQuery 立即添加删除的类

Question

我在这里遇到问题:http://jsfiddle.net/wkCV6/

当我点击 contacto 按钮时，它没问题，它可以正常打开。但是当我单击 volver 时，它会删除类并立即再次添加它。当我在执行之间发出一些警报时，我注意到了这一点。你可以在我的 jsfiddle 中看到它。

这是我正在使用的 JS。

$(function () {
    $("div.arrastre").on("click", function () {
        $(this).find("div.bloque").addClass("rotated");
        var esto = $(this);
        setTimeout(function () {
            esto.find("div.bloque div.back").addClass("agrandar");
            esto.addClass("agrandar")
        }, 100);
    });
});

$(function () {
    $("div#volver").on("click", function () {
        var esto = $(this);
        setTimeout(function () {
            esto.closest("div.bloque").removeClass("rotated");
            if (esto.closest("div.back").hasClass("agrandar")) {
                esto.closest("div.back").removeClass("agrandar");
                alert("se supone que quité la clase agrandar en back ");
            };

            if (esto.closest("div.arrastre").hasClass("agrandar")) {
                esto.closest("div.arrastre").removeClass("agrandar");
                alert("se supone que quité la clase agrandar en arrastre");
            };
        }, 100);
    });
});

Answer 1

当您点击 div#volver 时，click 事件被分派(dispatch)并冒泡到文档，在每个祖先上触发。

您触发了您首先在 div.arrastre 上设置的回调，因为它是 #volver 的父级。

setTimeout 被调用，导致类在点击 #volver 后 100 毫秒被添加。

要防止点击事件冒泡，您可以在设置回调或stopPropagation 中return false; :

$("div#volver").on("click",function(event){
    // your code
    event.stopPropagation();
    return false;
}

Working fiddle