0

jQueryを使用してテーブル行を追加および削除しようとしています.追加された行には削除リンクが含まれています.

ここに私のコード：

$("#target").click(function() {
$('#myTable tr:last').after('<tr><td>Bla</td><td><div class="remove">REMOVE</div></td></tr>');
});
$(".remove").on('click', function(event) {
  $(this).parent().parent().remove();
});

http://jsbin.com/ucopun/1/

何が問題なのですか？

削除リンクは、それが配置されている行全体を削除することになっています。

4

4 に答える 4

2

を使用するon()場合でも、ページにすでに存在するコンテナ要素にイベントをバインドする必要があります。私はこれがあなたが望むものだと思います：

$("#myTable").on('click', '.remove', function(event) {
  $(this).parent().parent().remove();
});
于 2012-12-12T16:32:31.050 に答える
2

あなたはほとんどそこにいました。このjsFiddleの例を参照してください。

$("#myTable").on('click', '.remove', function(event) {
    $(this).closest('tr').remove();
});​

コードの実行時に存在しない要素を追加するため、コードの実行.on()時に存在する要素にバインドするためにを使用する必要があります。

ドキュメントの状態として：

イベントハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが.on（）を呼び出すときにページに存在している必要があります。要素が存在し、選択できることを確認するには、ページのHTMLマークアップにある要素のドキュメントレディハンドラー内でイベントバインディングを実行します。新しいHTMLがページに挿入されている場合は、要素を選択し、新しいHTMLがページに配置された後にイベントハンドラーをアタッチします。

また、私は.closest('tr')よりフォローしやすいと思います.parent().parent()

于 2012-12-12T16:33:22.060 に答える
1

ライブ機能を使う

$('.remove',$("#myTable")).live('click',function(){
  $(this).parents('tr:first').remove();
});

<a href="http://jsfiddle.net/B8wSq/2/" rel="nofollow">http://jsfiddle.net/B8wSq/2/

于 2012-12-12T16:57:26.383 に答える
1

イベントをテーブルにバインドし、ボタンにデリゲートします

参考：http ://api.jquery.com/delegate/

$("#myTable").delegate('.remove','click' , function(event) {
  $(this).closest('tr').remove();
});

EDIT :デリゲートは on によって置き換えられたようです (jQuery 1.7 以降 - http://api.jquery.com/on/を参照)。

于 2012-12-12T16:35:54.000 に答える