動的に追加された要素にイベントをバインドする

Question

jqueryを使用して新しく追加された要素に関数をバインドしようとしています...私は数多くの例をオンラインで試しましたが、何とか何も役に立ちません。私はidとボタンを持つフォームを作成し、submit ajaxは別のページから要素をロードし、HTMLを現在のWebサイトに挿入します。すべて正常に動作するようですが、新しくロードされた要素にはイベントがバインドされていません。

<form id="tclick" method="post" action="${tg.url('/entryCmd')}"> 
    <input type="hidden" name="id" value="${entries[0].id}" /> 
    <input type="submit" value="submit"/> 
</form> 

とjQuery：

$("#tclick").on("submit", function(data){ 
    var h = $(this).serialize(); 
    var d; 

    $.get($(this).attr("action"), h, 
     function(returnData) { 
      d = returnData; 
     } 
    ); 

    $(this).ajaxStop(function(){ 
     $(this).after($(d).find(".edit-content").html()); 
    }); 

    return false; 
}); 

編集コンテンツのdivは、右のフォーム要素の後にロードされます。ここ はhtmlです。いくつかの要素があり、jQuery関数にバインドされている必要があります。

Answer 1

ページロード後にDOMに追加される要素にイベントを追加するには、delegate()を使用するか、jQuery 1.7+ on()を使用する必要があります。

$(".edit-content").delegate("#myDiv", "click", function() { 
    // do stuff when #myDiv gets clicked. 
}); 

API：
Delegate
On

Answer 2

ガット基本的に2つのオプションがこれを行うには：あなたのイベントバインド

1. を新しいHTML付加した後：

   $(this).ajaxStop(function(){ 
       $(this).after($(d).find(".edit-content").html()); 
       // do you binding here 
   }); 
   

を210

2. イベント委譲を使用します（.on()または.delegate()）。

   $('.some-container').on('click', '.edit-button', function(e) {...}); 
   

   これは、DOMにすでにあったか、またはその後にロードされ、後者の問題ではない、クラス.editボタンを持つ子供のための要素.some-コンテナにクリックイベントを委任します。ジャックすべての取引 `live`がon`の、参照の`の賛成で廃止されました@