17

私はこのようなコードを持っていました：

$('.remove-group').click(function () {
    $(this).closest('tr').remove();
});

これは、委任されたイベントハンドラーを使用して、将来ページに追加される要素のクリックをキャプチャする必要があるまでは正常に機能しました。

$(document).on('click', '.remove-group', function () {
    $(this).closest('tr').remove();
});

thisキーワードが元の要素を参照していないため、これは機能しなくなりました。

何か案は？

アップデート

私の質問のコードを単純化するための努力の中で、私は実際にそれを機能させたように思われます。私は実際には、文字列セレクターの代わりに変数に割り当てられたラップされたセットを渡していました。

var $removeGroup = $('.remove-group');
$(document).on('click', $removeGroup, function () {
    $(this).closest('tr').remove();
});

私がそのようにそれをするとき、それはうまくいかないようです。

4

3 に答える 3

10

「イベントの元の要素」を取得するには、イベントオブジェクトのtargetプロパティを使用します。

$(document).on('click', '.remove-group', function (e) {
    $(e.target).closest('tr').remove();
});

ただし.remove-group、元の要素は実際にはその「クリック」イベントがターゲット要素をバブルアップした子孫である可能性があるため、そのアプローチはおそらく実際には望ましくありません。つまり、ネストされたテーブルの場合に間違った行を削除する可能性があります。.on()ハンドラーのコンテキストでthisは、実際には。で一致する要素を参照し.remove-groupます。を使用してこの要素の委任されたイベントにバインドするには.on()、構文は次のとおりです。

$(static-parent-element).on(event, selector-string, handler)

たとえば、これは正しい構文です。

$(document).on('click', '.remove-group', function () {
    $(this).closest('tr').remove();
});

これにより、現在および将来の.remove-group要素が一致し、最も近いtr祖先が削除されます。ここで、バインド時にDOMに存在し、このイベントがトリガーされると予想される（つまり静的である）ときはいつでも存在する最も近い親要素に置き換えることができます（そしてそうすべきです）。これを行うと、イベントがトリガーされる前に、イベントがDOMツリーをバブルアップする必要がある距離が最小限に抑えられます。document.remove-group

于 2012-09-15T22:04:58.297 に答える
1

$(this)正常に動作するはずですが、いずれにせよ試してみてくださいevent.target。

$(document).on('click', '.remove-group', function (event) {
    $(event.target).closest('tr').remove();
});

デモ： http： //jsbin.com/inewoc/1/edit

于 2012-09-15T22:05:55.760 に答える