新しい行へのjavascriptのバインド

Question

私はいくつかの情報が表示されている簡単なテーブルを持っています。その行の詳細を表示するには、私はjavascript関数を持っています：

$('#production tr').bind("click", function(){ 
    reviewProductionOrder(this); 
}); 

これで、行を選択して情報を適切に表示することができます。しかし、私は上記の機能は私がテーブルにデータを追加することができますそれに応じて

$('#view').bind("click", function(){ 
    var from_date = $('#from_date').val(); 
    var to_date = $('#to_date').val(); 

    $.ajax({ 
     type : "post", url : "data.php", data : "from_date=" + from_date + "&to_date=" + to_date, 
     success : function(data) { 
     if(data != '') 
      $('#production tbody').html(data); 
     } 
    }); 
}); 

結果をフィルタ上に日付ピッカーを持っています。今私はbind私は新しく生成された行にJavaScript関数をバインドさせるだろうと思った。しかし、私はそれらの行をクリックすると、私はそうすることができません。

Answer 1

使用on()

$('#production').on('click' , 'tr', function() { 
    // your processing here 
}); 

$(document)の部分はあなたがon()ドキュメントページから、のイベントをリッスンしたい要素の親要素である必要があります。

委任イベントはその利点を持っています後で文書に追加される子要素である のイベントを処理できます。 委任イベントハンドラがアタッチされているときに存在することが保証されている要素を選択すると、委任されたイベントを に頻繁にアタッチして削除する必要がなくなります。この 要素は、 ハンドラがドキュメント内のすべてのバブリングイベントを監視したい場合は、 モデルビューコントローラの設計、またはドキュメントのビューのコンテナ要素です。文書要素の は、他のHTMLをロードする前に文書の先頭にありますので、文書を準備するのを待つことなく、 を待たずにそこにイベントを添付することは安全です。

Answer 2

あなたには2つの方法があります。まず、既存のDOMオブジェクトのイベントのみをバインドできることを知る必要があります。最初にバインドするときは、作成する新しい要素ではなく、既存の要素にバインドします。これを回避するために、jQueryは.bindと同じように動作する ".live"という名前を持っていますが、最初の呼び出し後にDOMオブジェクトに適用し続けます。その機能の主な問題は、それが遅いということです。動的なJavaScriptやアニメーションがたくさんあるが、ページ上に1つのテーブルしかない場合は、違いは大きい。それが追加された後、あなたがイベントをバインドするために取得

$('#production tbody').html(data).find('#production tr').bind("click", function(){ 
    reviewProductionOrder(this); }) 

その方法：あなたはまた、AJAX呼び出しからのご回答は、あなたが、例えば、それを行うことができ、純粋なHTMLであると言って、新たな追加オブジェクトにイベントを再バインドでき。

希望しました。