如果hasClass条件jquery无法正常工作

Question

我试图用jquery语句用一些onclick事件和条件执行一些警报。但似乎事件处理程序无法正常工作，可能是因为我的事件处理逻辑中遗漏了一些事实。我只有一个按钮，ID为{bottone1，我有一些标识为#b1和＃b2的菜单按钮。

第一个事件正常，它正确地添加了类＆＃34; cliccatoInvoca1_OnReady＆＃34;。当我点击#bottone1时，它会启动第一个提醒＆＃34; cliccatoInvoca1_OnReady＆＃34;。此外onClick事件$("#b1")正常运行，它会移除班级＆＃34; cliccatoInvoca1_OnReady＆＃34;并替换为＆＃34; cliccatoInvoca1＆＃34;。

这一点我遇到了第一个问题

当我点击#bottone1时，它就像第一个警报＆＃34; cliccatoInvoca1_OnReady＆＃34;，然后＆＃34; cliccatoInvoca1＆＃34;。然后，当我点击#b2并点击#bottone1时，它会执行3次提醒，＆＃34; cliccatoInvoca1_OnReady＆＃34;，＆＃34; cliccatoInvoca1＆ ＃34;最后＆＃34; cliccatoInvoca3＆＃34;。

所以，主要的问题是，如果条件只执行1次警报，它就不起作用。所以当我点击＃bottone1时，它会按顺序执行所有警报。

这是我的document.ready功能

$(document).ready(function () {
    $("#select-1").multiselect();
    invoca1();
    $("#bottone1").addClass("cliccatoInvoca1_OnReady btn btn-default");
    if ($("#bottone1").hasClass("cliccatoInvoca1_OnReady")) {
        $("#bottone1").click(function () {
            alert("cliccatoInvoca1_OnReady");
            keys = [];
            $('input[name="multiselect_select-1"]:checked').each(function () {
                keys.push(this.value);
            });
        });
    }

    $("#b1").click(function () {
        invoca1();
        $("#bottone1").removeClass("cliccatoInvoca1_OnReady noClass").addClass("cliccatoInvoca1");
        if ($("#bottone1").hasClass("cliccatoInvoca1")) {
            $("#bottone1").click(function () {
                alert("cliccatoInvoca1");
                keys = [];
                $('input[name="multiselect_select-1"]:checked').each(function () {
                    keys.push(this.value);
                });
            });
        }
    });

    $("#b2").click(function () {
        invoca3();
        $("#bottone1").removeClass("cliccatoInvoca1").addClass("cliccatoInvoca3");
        if ($("#bottone1").hasClass("cliccatoInvoca3")) {
            $("#bottone1").click(function () {
                alert("cliccatoInvoca3");
                keys = [];
                $('input[name="multiselect_select-1"]:checked').each(function () {
                    keys.push(this.value);
                });
            });
        }
    });
});

Answer 1

更改为使用委托事件处理程序，附加到不变的祖先元素，每个元素都有一个匹配的选择器：

e.g。像这样：

$(document).on('click', "#bottone1.cliccatoInvoca1_OnReady", function() {
    alert("cliccatoInvoca1_OnReady");
    keys = [];
    $('input[name="multiselect_select-1"]:checked').each(function () {
         keys.push(this.value);
    });
});

以上就是一个点击处理程序所需的全部内容，重复其可以拥有的其他类的模式。您永远不需要hasClass检查。

你的其他代码变得如此简单：

$("#b1").click(function () {
     invoca1();
     $("#bottone1").removeClass("cliccatoInvoca1_OnReady noClass").addClass("cliccatoInvoca1");
 });

委派处理程序：

• 委派的事件处理程序通过监听事件（在本例中为click）来冒泡到祖先元素。
• 您通常选择最接近的不变的祖先元素，但如果没有其他更接近/方便的话，document是默认值。不要使用'body'，因为它有一个与样式相关的错误，可能导致鼠标事件不起泡。
• 然后它将jQuery选择器仅应用于bubble-chain中的元素。
• 然后将该函数仅应用于导致事件的匹配元素。
• 结果是元素只需要在事件时间匹配而不是事件注册时间。

此模式将显着简化您的代码。

整个例子将会是这样的：

$(document).ready(function () {
    $("#select-1").multiselect();
    invoca1();
    $("#bottone1").addClass("cliccatoInvoca1_OnReady btn btn-default");

    $("#b1").click(function () {
        invoca1();
        $("#bottone1").removeClass("cliccatoInvoca1_OnReady noClass").addClass("cliccatoInvoca1");
    });

    $("#b2").click(function () {
        invoca3();
        $("#bottone1").removeClass("cliccatoInvoca1").addClass("cliccatoInvoca3");
    });

    $(document).on('click', "#bottone1.cliccatoInvoca1", function () {
        alert("cliccatoInvoca1");
        keys = [];
        $('input[name="multiselect_select-1"]:checked').each(function () {
            keys.push(this.value);
        });
    });

    $(document).on('click', "#bottone1.cliccatoInvoca3", function () {
        alert("cliccatoInvoca3");
        keys = [];
        $('input[name="multiselect_select-1"]:checked').each(function () {
            keys.push(this.value);
        });
    });
});

说明：

• 我忽略了这样一个事实，即您的事件处理程序包含相同的代码，并假设实际代码具有不同的操作。