動的に追加されたhtml要素にイベントリスナーを追加する

Question

動的に追加されたhtml要素にイベントリスナーを追加する際に問題があります。

シナリオでは、多数の「フォーム」がデータベースに格納され、ユーザーに順次表示されます。新しいフォームが表示されるたびに、イベントハンドラが新しい 'フォーム'、つまり子要素に追加されます。 html要素のidは、それぞれの 'form'で同じです。

すべてが最初のフォームで正常に機能しますが、2番目のフォームが追加されると、イベントハンドラが追加されてもそれらは起動しません。

私は、.click、.on。off、.addEventListener、.removeEventListenerなどを使用して無数の順列を試みましたが、これを動作させるように見えることはできません。私が使用しています

コードは次のとおりです。

  //replace innerHTML    
      $("#mob_html").off();       //remove previous event listeners 
      $("#mob_html").remove();       //remove html element 
      $(form.html_str).insertAfter("#event_hdr_div"); // add new html element with form html stored in database 

      // add event handler 
      $('#'+child_id_1).click(function() { 
       if (perm_fg==true) { 
        open(); 
       } 
      }); 
      $('#'+child_id_1).click(function() { 
       if (perm_fg==true) { 
        open(); 
       } 
      }); 

任意の提案は大歓迎します！

Answer 1

それはjqueryの以前のバージョンでサポートされていない可能性があるため、あなたの動的に追加された要素を結合するが、jQueryの最新バージョンを使用することを確認することができます（）関数での助けを借りて、ドキュメントオブジェクト

$(document).on('click', '.some-class', function() { 
    // ... 
}); 

Answer 2

を選択。