4

我有一张带复选框的桌子。当一个复选框被选中时，我会用 jQuery 捕获事件，但这个复选框会立即取消选中。

jsfiddle：http: //jsfiddle.net/K4uDa

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

问题出在哪里？

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

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

4

4 回答 4

4

工作方式return false是通过组合event.preventDefault()（顾名思义，它可以防止偶数的默认操作，例如取消/选中复选框，点击链接或提交表单......）和event.stopPropagation()（这是阻止事件传播到/被其祖先元素“听到”）。IE 的做法略有不同，但实际上您希望在放弃传播的同时保留默认操作（取消/检查）。所以，考虑到这一点，我建议：

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

JS 小提琴演示。

顺便说一句，值得指出的live()是，在 jQuery 1.7 及更高版本中已弃用（由on()方法替换），在 jQuery 1.7 之前的版本中，文档（for live()）建议使用delegate()。

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

参考：

于 2013-01-30T14:49:16.337 回答
3

而不是return false，您应该使用event.stopPropagation();. return false，除了停止传播（这是您想要的）之外，还可以防止事件触发的默认操作，因此您的复选框将不会被选中。

此外，live()已弃用，因此请使用.on()（或delegate()<1.7）。

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

jsFiddle 演示

于 2013-01-30T14:50:58.300 回答
1

编辑 - 您需要通过使用event.stopPropagation()而不是阻止事件冒泡return false

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

于 2013-01-30T14:40:24.643 回答
0

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

于 2013-01-30T14:38:51.193 回答