0

jQuery のイベント委任を使用して、テーブルの行にクリック イベントを追加しています。行の最初の td にもチェックボックスがあります。行のどこかをクリックすると、すべてが期待どおりに機能します。ただし、チェックボックスをクリックしたときにイベントが機能したくありません。:not() セレクターを使用してみましたが、チェックボックスをクリックしたときにまだイベントをトリガーしているため、何かが足りない可能性があります。


HTML

<tr>
    <td>
        <div class="myCheckbox"><input type="checkbox" name="userName" /></div>
    </td>
    <td><a href="/go/to/user/profile"></a></td>
    <td>more info</td>
    <td>more info</td>
    <td>more info</td>
</tr>

jQuery

$('table tr:not(':checkbox')').on('click', 'td', function(event) {

    // Do something
});



私がやろうとしていることを修正するための助けを得ることができますか?

4

2 に答える 2

6

2 つのオプション (どちらもtr:not既存のコードから要素を削除する必要がありますが、これは機能しません。tr要素をチェックボックスにすることはできず:not、その内容ではなく要素をチェックします):

  1. を呼び出すチェックボックスにイベント ハンドラを追加しますe.stopPropagation。その後、クリックイベントは行に到達しません。これは、直接または委任を介して行うことができます。これは、直接行っているライブの例です。label間接的に行う場合は、サポートする予定のすべてのブラウザーで、チェックボックスをアクティブにするクリックを必ずテストしてください (それらを使用する場合)。

    また

  2. これをハンドラーに追加します。

    if ($(event.target).is('input[type=checkbox]')) {
    return;
}

    例えば：

    $('table').on('click', 'td', function(event) {

    if ($(event.target).is('input[type=checkbox]')) {
        return;
    }

    // Logic here
});

    これは、イベントのソースをテストしてチェックボックスであるかどうかを確認し、早期に救済することで機能します。

どちらの場合も、 a を使用しlabelてチェックボックスをアクティブにする場合、ラベルに対して同じことを行う必要がある場合があります。

#2 が s を処理するように見えることに興味がlabelありましたが、関数に移動するのに十分なコードであることがわかりましたが、難しいことではありません。ソース

jQuery(function($) {

  // The table cell click handler
  $("table").on("click", "td", function(e) {
    // Is the source a checkbox or the label for
    // one?
    if (isCheckbox($(e.target))) {
      return;
    }

    // Normal handling
    $(this).toggleClass("foo");
  });

  // Function to test whether the source is a
  // checkbox, or the label of a checkbox
  function isCheckbox($elm) {
    var chkid;

    if ($elm.is("input[type=checkbox]")) {
      return true;
    }
    if ($elm.is("label")) {
      chkid = $elm.attr("for");
      if (chkid) {
        return $("#" + chkid).is("input[type=checkbox]");
      }
      return !!$elm.find("input[type=checkbox]")[0];
    }
    return false;
  }

});
于 2012-07-26T21:22:20.903 に答える
0

イベントがバブリングしないように stopPropagation() を使用してみてください。 

$('div.myCheckbox input[type=checkbox]').bind('change', function(e) {
  e.stopPropagation();

  //do stuff here
});
于 2012-07-26T21:24:15.890 に答える