0

昨日、新しいテーブル行を追加する方法について質問しましたが、複製された行のcssを変更します。その質問に対する答えを得ました！（リンク）しかし、新しい問題が発生しました。

私は次のようなテーブルを持っています：

<table class="test">
<thead>
<tr>
    <td><b>header 1</b></td>
    <td><b>header 2</b></td>
    <td><b>header 3</b></td>
    <td><b>header 4</b></td>
</tr>
</thead>
<tbody>
<tr class="1">
    <td>data 1</td>
    <td>data 2</td>
    <td>data 3</td>
    <td class="remove"></td>
</tr>
<tr class="2">
    <td>data 1</td>
    <td>data 2</td>
    <td>data 3</td>
    <td class="remove"></td>
</tr>
<tr class="new">
    <td>data 1</td>
    <td>data 2</td>
    <td>data 3</td>
    <td class="new"></td>
</tr>
</tbody>
<table>​

Jqueryコード：

$("table.test tr.new:last td.new").click(function(){
     var x = $('table.test tr.new:last').clone(true);
     $(this).removeClass('new').addClass('remove').off('click');    
     x.insertAfter('table.test tr.new:last');
});
     $("table.test tr td.remove").click(function(){
     $(this).closest("tr").fadeOut('slow');
});

td.newセルをクリックすると、行を追加します。これは機能しています。また、クラスはtd.removeセルで変更されます。ただし、クリックイベントは正しく機能しません。削除セルは常に行を削除する必要があります。.off（）関数と.on関数を使用する必要があることはわかりましたが、この関数の背後にあるロジックを理解できないようです。次の画像は私が目指しているものです：postimage

私が今持っているもののJsfiddleの例はここで見つけることができます

4

2 に答える 2

1

行を動的に正しく追加しているようです。したがって、イベントを委任する必要があります。

それ以外の

$("table.test tr td.remove").click(function(){

試す

$("table.test").on('click','td.remove', function(){

フィドルをチェック

アップデート

両方のケースを単一のハンドラー自体で処理できます。コードにいくつかの変更を加えました。

$("table.test").on('click', 'td.remove,td.new', function() {
    var $this = $(this);
    if ($this.hasClass('new')) {
        var x = $('table.test tr.new').clone();
        $this.removeClass('new').addClass('remove');
        $this.closest('tr').removeClass('new');
        x.insertAfter('table.test tr:last');
    }
    else if ($this.hasClass('remove')) {
        $(this).closest("tr").fadeOut('slow');
    }
});​
于 2012-11-30T20:40:48.093 に答える
0

jquery .live（）を使用する必要があります。非推奨になることはわかっていますが、これは簡単な出発点になります。 http://api.jquery.com/live/

将来DOMに追加される削除要素をフックします。したがって、再初期化などを処理する必要はありません。

編集：

したがって、再び.live（）に戻ります。これは非推奨であるため、次の方法で実現する必要があります。

$（document）.on（events、selector、data、handler）;

あなたの場合：$（document）.on（'click'、'.remove'、function（）{//やりたいことは何でも}）;

于 2012-11-30T20:33:15.647 に答える