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/

チェックボックスがオン/オフのときに他のイベントが発生しないようにするため、「returnfalse」を追加しました。

4

4 に答える 4

4

動作する方法return falseは、event.preventDefault()（名前が示すように、チェックボックスのチェックを外す/チェックを外す、リンクをたどる、フォームを送信するなど、偶数のデフォルトのアクションを防ぐ...）とevent.stopPropagation()（これにより、イベントが/その祖先の要素によって「聞かれる」）。IEの動作は少し異なりますが、事実上、伝播を破棄する間、デフォルトのアクション（un / checking）を保持する必要があります。だから、それを念頭に置いて、私は提案したいと思います：

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

JSフィドルデモ。

live()ちなみに、jQuery 1.7以降では非推奨（メソッドに置き換えられていon()ます）であり、jQuery 1.7より前のバージョンでは、ドキュメント（の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 に答える