对于复选框,将调用两次jQuery单击事件处理程序

我在ASPX页面中遇到以下代码的问题:

 $(document).ready(function() { $('.test').click(function() { alert("click") }) });   

在浏览器(FF3.5 / IE8)中,我有以下问题:

  • 如果我单击复选框(小方块),它按预期工作
  • 如果我单击复选框的文本(“Checkbox XYZ”),则单击事件将被触发两次,警报将显示两次。

我想这与复选框呈现为HTML的方式有关,如下所示:

     

如何正确设置click事件处理程序以防止它被调用两次?

我刚刚经历过同样的事情,但我不确定事件冒泡是否会导致我的问题。 我有一个自定义树控件,当一个项打开时,我使用$(id).click()将处理程序附加到某种类型的所有元素。

我怀疑这意味着已经拥有该事件的其他地方的现有项目可能会再次添加它。 我发现解绑所有内容然后重新绑定解决了我的问题,因此:

 $('img.load_expand').unbind("click").click(function() { // handler }); 

我认为这是因为带有for属性的会引发单击元素的click事件。

因此,在您的jQuery代码中,您为设置了一个click事件处理程序。 单击 ,将执行您在标签上设置的单击事件处理程序,然后当标签引发上的单击事件时,将在上设置单击事件处理程序。

 $(document).ready(function() { $('.test').click(function(event) { event.stopImmediatePropagation(); alert("Click"); }) } ); 

我能够通过停止事件传播来使我的代码工作。 它不会影响复选框的状态更改。

在再次阅读我的问题之后,我找到了解决问题的方法。

只需将“input”添加到jQuery选择器:

  

只需使用.mouseup而不是.click

你所看到的是事件冒泡。 click事件首先由标签处理,然后传递给复选框。 你会得到一个警报。 要防止事件冒泡,您需要在单击处理程序中返回false。

 $(document).ready(function() { $('.test').click(function() { alert("Click"); return false; }) }); 

然而,虽然这可以防止事件冒泡,但它也具有防止复选框改变状态的不良副作用。 所以你需要围绕它编码。

解决:这适用于Firefox 3.6.12和IE8。

 $(function(){ $("form input:checkbox").unbind("click") .click(function(){ val = $(this).val(); alert(val); }) } 

诀窍是unbind("click"). 在将它绑定到.click(fn) ; 这将禁用同一事件两次。

请注意,事件“更改”不会在第一次选中复选框时复选框。 所以我用“点击”代替。

我遇到了与点击事件相同的问题,并发现了这篇文章。 实质上,如果在标记内有多个jQuery文档就绪函数,则可以获得多个事件。 当然,修复程序是不执行此操作,或取消绑定click事件并重新绑定它,如上所述。 有时,使用多个javascript库,很难避免多个document.ready(),因此unbind是一个很好的解决方法。

  $('#my-div-id').unbind("click").click(function() { alert('only click once!'); }  

我知道这个问题现在已经关闭,但我只是遇到了同样的问题,我想添加我发现的解决方案,可能会对未来的类似问题派上用场。

当您添加ASP代码时:

  

问题是不是一个html控件,它只是由一些心理发明的扭曲思维构成的 ASP,所以浏览器会收到别的东西。

浏览器将收到以下内容:

     

许多可能的解决方案之一:

浏览器会收到一个内容,其中包含输入“复选框”以及带有文本的标签。 因此,我的解决方案是这样的:

 $('.test > :checkbox').click(function() { if ($(this).attr("checked")) { alert("checked!!!"); } else { alert("non checked!!!"); } }); 

那里发生了什么? 这个选择器$('.test > :checkbox')表示:找到带有“test”类的元素并带来它包含的任何复选框。

该函数运行两次。 一旦从内部开始,然后从内部再次调用它。 简单地在最后添加一个return语句。

   

这对我来说非常合适。