Question

我有一张带复选框的表格。选中复选框后，我使用jquery捕获事件，但立即取消选中此复选框。

<table>
  <tr>
    <td><input type='checkbox' /></td><td>AA</td>
  </tr>
  <tr>
    <td><input type='checkbox' /></td><td>BB</td>
  </tr>
  <tr>
    <td><input type='checkbox' /></td><td>CC</td>
  </tr>    
</table>


$(function() {

  $("table tr").live("click", function() {
    alert('row clicked');
  });

  $("table tr td input:checkbox").live("click", function() {
   alert('checked/unchecked'); 
   return false;
  });

})

问题出在哪里？

感谢。

UPDATE ------------------

抱歉，我在这里更新了我的jsfiddle：http://jsfiddle.net/K4uDa/1/

我添加了'return false'，因为我不希望在选中/取消选中复选框时触发其他事件。

Answer 1

return false的工作方式是组合event.preventDefault()（顾名思义可以防止偶数的默认操作，例如取消/勾选复选框，跟踪链接或提交表单.. 。）和event.stopPropagation()（这是阻止事件传播到'被其祖先元素'听到的东西）。 IE有点不同，但实际上你想要在丢弃传播时保留默认操作（取消/检查）。所以，考虑到这一点，我建议：

$('input:checkbox').click(function(e){
    e.stopPropagation();
    alert(this.checked);
});

JS Fiddle demo

顺便提一下，值得指出的是，jQuery 1.7及以上版本（live()方法取代）中不推荐使用on()，而jQuery 1.7之前的版本中则弃用live()建议改用delegate()。

但鉴于您将事件直接绑定到元素本身，这表明它们不是动态添加，您也可以直接使用click()方法。

参考文献：

Answer 2

而不是return false，您应该使用event.stopPropagation();。 return false，除了阻止传播（这是您想要的），also prevents the default action由事件触发，因此不会检查您的复选框。

此外，我们已弃用live()，因此请使用.on()（或delegate()为＆lt; 1.7）。

$("table tr td").on("click", "input:checkbox", function(e) {
    alert('checked/unchecked'); 
    e.stopPropagation();
});

jsFiddle Demo

Answer 3

编辑 - 您需要使用event.stopPropagation()代替return false

来阻止事件冒泡

http://jsfiddle.net/K4uDa/16/

Answer 4

这是因为return false停止检查复选框。

我的表格中的复选框立即取消选中

4 个答案: