動的に追加されたhtml要素にイベントリスナーを追加する際に問題があります。動的に追加された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();
}
});
任意の提案は大歓迎します!
正確な問題を確認するためにjsfiddleを作成できますか? –
私はこのシナリオを完全には理解していませんが、クラスを追加して、on()で最初に一度だけイベントのリッスンをバインドしてください。 on()の利点は、呼び出し後に作成された動的に追加された要素をバインドすることです。 –