2012-01-13 21 views
2

私は乗客の個人データを収集するために動的テーブルを作成しています。 このテーブルには最後に行が追加されています。すべての行は最初の行のコピーであり、最後の要素はその行を削除するためのコントロールとして使用するリンクです。jQuery on()が要素の削除に失敗しました

問題は、動的に作成されない最初の行だけが実際に動作しており、それ自体を削除できることです。

したがって、最初の行がないためにページが新しい行の作成を停止することもあります(ただし、別の問題はxDです)。

これは私が行を削除するために使用するコードです: http://www.micontrol.cl/~mvargas/wordpress/wp-transatacama/reservas-rapidas/tabladinamica.php

+0

マルコスを、あなたも私たちが.remove要素とその親の親がどのように見えるかを見ることができるようにHTMLを十分に含めるように質問を編集してください。 – dgvid

+1

'event.preventDefault'はカッコがないので何もしません(' event.preventDefault() ')。 – JJJ

+0

あなたのコードは、最初にページに存在するクラス 'remove'を持つ要素に対してのみ機能します。新しい要素にも適用するには、このセレクタを子孫部分に置かなければなりません: '$(selector).on( 'click'、 '.remove'、function(){...});'。下の私の答えを見てください。 –

答えて

1

.on()イベントは要素だけにバインドされている:あなたはそれをチェクする必要があるかどう

$('.remove').on("click",function(event){ 
    event.preventDefault; 
    $(this).parent().parent().remove(); 

    //alert(str); 
    newRowNum -= 1; 
}); 

、ここでは、ライブサイトです最初はデフォルトの構文でDOMにあります。 See the documentation for it。イベントを他の要素に委譲する場合は、2番目のセレクタが必要です。ここで

+0

私はそれを得ることはできませんでしたが、 "長い"(長いxDではない)ドキュメントの最後に答えがあります。最後の例は新しい要素を作成し、新しい要素を作成するということです。 D. –

1
<table id="test"> 
     <tr> 
      <td>A</td> 
      <td><a>Click</a></td> 
     </tr> 
     <tr> 
      <td>B</td> 
      <td><a>Click</a></td> 
     </tr> 
    </table> 

    <p> 
     <a id="insert">Copy</a> 
    </p> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 

     $("#test").find("a").click(function(){ 

      $(this).parents("tr").remove(); 

     }); 

     $("#insert").click(function(){ 

      $("#test tr").first().clone(true).appendTo("#test"); 

     }); 

     }); 

    </script> 

あなたのためのフィドルです:

http://jsfiddle.net/AdS8D/3/

EDIT:フィドルに追加クローン機能。

+0

thxですが、うまくいきませんでした。同じことを行うだけで、動的に作成された行はまったく影響を受けません。 : –

+0

@MarcosVargasMoran:私のフィドルリンクを修正するのを忘れました。今すぐ試してみてください – Josh

0

クローン手法を使用して戻りますが、.clone(true)を使用すると、イベントハンドラも同様にコピーされます。

+0

html()? var addRow = $( "#tabdata tbody")。first().clone() ; 次にappend(addRow)を追加します。 –

+0

はい、ただしtrueを追加することを忘れないでください。つまり、スタイル、データ、および最も重要な(この場合は)イベントハンドラをコピーします。既存のコードでイベントハンドラを削除ボタンにアタッチしていません。クローン(true)を使用すると、# – Archer

+0

のクローンを使って試しましたclone()を使用して作成するか、単純なhtml()を使用して作成します。とにかくあなたのためのthaks私はhtml()を使用して残している答えは、今のところ、D。 –

0

あなたはこのコードを試すことができます。

$("#tabdata").on("click", ".remove", function(event){ 
    event.preventDefault; 
    $(this).parent().parent().remove(); 
    newRowNum -= 1; 
});