如果hasClass条件jquery不能正常工作

Question

我试图用jquery语句执行一些带有onclick事件和条件的警报。但事件处理程序似乎无法正常工作，可能是因为我的事件处理逻辑中缺少了一些东西。我只有一个id为#bottone1的按钮，还有一些id为#b1和#b2的菜单按钮。

第一个事件运行良好，它正确地添加了类"；cliccatoInvoca1_OnReady"；。当我点击CCD_ 5时；cliccatoInvoca1_OnReady"；。onClick事件$("#b1")也正常工作；CCD_ 9"；并用类"代替；CCD_ 10"；。

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

当我点击CCD_ 11时，它就像第一个警报"；CCD_ 12"；，然后"；cliccatoInvoca1"；。然后，当我点击#b2，然后点击#bottone1，它执行3个警报；CCD_ 15"CCD_ 16"；最后"；CCD_ 17"；。

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

这是我的文档。准备函数

$(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选择器仅应用于气泡链中的元素
• 它然后应用该函数，仅应用于导致事件的匹配元素
• 结果是元素只需要在事件时间匹配，而不需要在事件注册时间匹配

此模式将显著简化代码。

整个例子将变成这样：

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

注意事项：

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