JSイベントハンドラをバインド/アンバインド要素

Question

私は非常に基本的な疑問を持っている...私のワードプレスのブログで
、私のカスタムmetaboxで、
これは私のイベントハンドラです：

jQuery('tr input.test').on('click', function(event){ 
    event.preventDefault(); 
    var index = jQuery(this).closest('tr').index(); 
    set_row_index(index); 
    . 
    . 
    . 
    }); 

最後の列にボタンがあるテーブル（入力タイプ - >送信） "編集"があります。 行を動的に追加すると、新しく追加された行の[編集]ボタンが機能しません。

jQuery('tr #confirm_add').on('click',function(){ 
    event.preventDefault(); 

    . 
    . 
    . 
    html += "<td> <input type=\"submit\" id=\"select\" value=\"Edit\"></td>"; 
    . 
    . 
    . 
    $('#metabox_row').prepend(html); 

    // BIND ELEMENT HERE 
}); 

このイベントハンドラを[編集]ボタンにバインドする必要があります。 これを達成する方法をお手伝いください

Answer 1

現在、あなたのコードがイベントバインディングコールを行うときに、ページに存在する要素にのみアタッチする「直接」バインディングと呼ばれるものがあります。

要素を動的に生成する場合、.on()委任イベントアプローチを使用してEvent Delegationを使用する必要があります。

スクリプト

$('#metabox_row').on('click', "input.select'", function(){ 
    //Your code 
}); 

変更button

html += "<td> <input type=\"button\" id=\"select\" value=\"Edit\"></td>"; 

の種類委任のイベントは、彼らがで文書に追加されている子孫要素からのイベントを処理することができるという利点を持っています後の時間。デリゲートされたイベントハンドラがアタッチされた時点で存在することが保証されている要素を選択することによって、デリゲートされたイベントを使用して、クリックイベントを動的に作成された要素にバインドしたり、イベントハンドラを頻繁にアタッチしたり、