为复选框调用两次jQuery单击事件处理程序

Question

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

<script type="text/javascript">
$(document).ready(function() {
    $('.test').click(function() {
        alert("click")
    })
});
</script>

<asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" />

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

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

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

<span class="test">
 <input id="ctl00_c1_cb1" type="checkbox" name="ctl00$c1$cb1" checked="checked"/>
 <label for="ctl00_c1_cb1">Checkbox XYZ</label>
</span>

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

Answer 1

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

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

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

Answer 2

我认为这是因为<label>带有for属性的a 会引发click事件<input type="radio">或单击<input type="checkbox">时关联的元素.

因此,在您的jQuery代码中,您为内部<label>和<input>内部设置了一个单击事件处理程序<span class="test">.单击时<label>,将执行您在标签上设置的单击事件处理程序,然后<input>在标签引发单击事件时将执行设置的单击事件处理程序<input>.

Answer 3

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

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

Answer 4

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

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

<script type="text/javascript">
$(document).ready(function() {
        $('.test input').click(function() {
                alert("click")
        })
});
</script>