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

我在这里遇到问题：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);
    });
});

最佳答案

当您单击div#volver时，将调度click事件并将其冒泡到文档，并在每个祖先上触发。

由于它是div.arrastre的父级，因此会触发您首次在#volver上设置的回叫。

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

为防止单击事件冒泡，您可以在设置的回调中仅return false;或stopPropagation：

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

Working fiddle