asp.net - 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)中我遇到以下问题:

• 如果我点击复选框(小方 block )，它就会按预期工作
• 如果我单击复选框的文本(“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>

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

Answer 1

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

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

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