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

Question

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

第一个事件工作正常,它正确地添加了类" cliccatoInvoca1_OnReady".当我点击#bottone1它时,启动第一个警报" cliccatoInvoca1_OnReady".onClick事件也$("#b1")正常,它删除了类" cliccatoInvoca1_OnReady"并替换为类" cliccatoInvoca1".

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

当我点击#bottone1它时,就像第一个警报" cliccatoInvoca1_OnReady",然后是"cliccatoInvoca1".然后,当我点击它#b2,然后我点击#bottone1它执行3警报," cliccatoInvoca1_OnReady"," cliccatoInvoca1",最后" cliccatoInvoca3".

因此,主要问题是,如果条件仅执行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

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

像这样:

$(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);
        });
    });
});

笔记:

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