2

次のような関数の jQuery セレクターを作成しました。

    $('html').not('.table-main tr[selected]').mousedown( function( e ) {

しかし、どういうわけかまったくフィルタリングされておらず、その理由がよくわかりません。セレクターに ('.table-main')を残したとしても、テーブルをクリックすると関数がトリガーされます...何が問題なのですか?

ドキュメントは .not() でまったくトリガーされず、「ボディ」は同じ結果になるため、「html」の代わりにドキュメントまたは「ボディ」を使用しても役に立ちません。

編集：テーブルの外で別のブロックを使用してみましたが、うまくいきました。これをテーブルで使用できない可能性はありますか?

Update2: 要求に応じて、テーブルのレンダリングされた html コードを次に示します。

    <table border="0" cellspacing="2px" cellpadding="5px" class="table-main">
      <tr id="tablefields">
        <th style="padding: 0;">
          <table cellpadding="0" cellspacing="0" border="0" align="center">
            <tr><th><div class="tr-head-get" id="tr-get-0">Name</div></th></tr>
            <tr><th><div class="th-header" id="th-header-0" style="top: 54px;">Name</div></th></tr>
          </table>
        </th>    
      <th style="padding: 0;"></th>
    </tr>
      <tr id='table_form_new_device' class='table_form_class'>
      <form accept-charset="UTF-8" action="/devices" class="new_device" data-remote="true" id="new_device" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="T2dSeZpxxvgJdTP+yoE7BrVODzqJ95gyVu9Wh/v7oP8=" /></div>
        <th class='tablefield'>
          <input id="device_devicename" name="device[devicename]" size="10" type="text" />
        </th>
        <th>
          <div class='submitbox' id='submitbox_new_device'>S</div>
          <script>
            $('#submitbox_new_device').click(function (event) {
              $('#new_device').submit();
            });
          </script>
        </th>
    </form></tr>
    </table>
    <div class="dropdown-button" style="margin: 0 2px;">Filter</div>
4

3 に答える 3

3

ドキュメント内のすべての要素にイベント ハンドラーをアタッチしたくないため、これには委任されたイベント処理を使用する必要があります。ドキュメント レベルでバブル イベントをインターセプトし、テーブルで選択された行ではない要素からマウスダウンが発生したかどうかを確認します。

さらに、動作するtr[selected]可能性は低いようです。"selected"選択した行にクラスを追加しtr.selectedて、セレクターとして使用する必要があると思います。

その変更を行う場合は、次の 2 つのオプションのいずれかをお勧めします。

$(document).mousedown(function(e) {
    if (!$(e.target).is('.table-main tr.selected')) {
       // mouse down and it wasn't in a selected row of your table)
    }
})

また、jQuery 委任に多くの作業を任せることができる場合もあります。

$(document).on('mousedown', ':not(.table-main tr.selected)', function() {
   // mouse down and it wasn't in a selected row of your table)

});

実際の HTML を確認した後、問題を正しく理解していれば、これは機能するはずです。これにより、そのクリックがクラスtable-mainを持つ行にない限り、クリックが発生するたびにイベントが発生します。selected

$(document).on('mousedown', function(e) {
   // mouse down and it wasn't in a selected row of your table)
    e.stopPropagation();
    if (!$(e.target).closest(".table-main tr.selected").length) {
        console.log("mousedown not in selected row of table-main")
    }
});​

ここにデモがあります：http://jsfiddle.net/jfriend00/5QD6N/

于 2012-04-04T17:26:03.623 に答える
2

[selected]タイプの要素で使用しても意味がありませんtr。input（）にselectedを使用しますcheckbox,radio。.selectedのtr要素にクラスを追加してから、.table-main次を使用できます。

編集：上記の誰かのように、本文内にネストされた要素を選択して使用したいとします。

$('body').find(':not(.selected)').mousedown(function(e){})
于 2012-04-04T17:05:32.303 に答える
1

$('html')HTML要素を含むjQueryオブジェクトを作成します。

.not('.table-main tr[selected]')table-mainクラスのメンバーである要素の子孫である、選択された属性（ここではエラーがあり、その属性はTRに表示されません）を持つすべてのTR要素を削除します。HTML要素はTR要素ではなく、何からも派生できないため、これによって要素が削除されることはなく、効果もありません。

mousedown( function( e )イベントハンドラーをHTML要素にバインドします。何かが伝播を停止しない限り、クリックは最終的にそこまでバブルします。

選択されていないTR要素のクリックをキャプチャしたいと思います（実際に達成したいことを言っていないので）。クラスを使用してHTMLを有効にすることに切り替えたと仮定します…</p> 

$('.table-main tr:not(.selected)').mousedown(…);

と

<tr class="selected">
于 2012-04-04T17:05:52.473 に答える