append - 追加された要素に対して .on のクリック イベントが発生しない

Question

私の問題は、.onを使用しても、クラスが追加された追加されたdivのクリックイベントがトリガーされないことです。これはページからの私のスクリプトです。

$(".added").on("click", function () { alert("halo") });

$("#nextAdress").on("click",function (event) {
    event.preventDefault();
    $("#trainerRegistrationFields").append('<div class="added">adsa</div>');
}

クラスが追加された動的に追加された要素でもクリックイベントがトリガーされるように、私を助けてもらえますか?

事前にお知らせください

Answer 1

動的に追加された要素には、 onのイベント委任構文を使用できます。

$("#trainerRegistrationFields").on("click",".added", function (){ 
    alert("halo") ;
});

コードでは、イベント バインド時に DOM に存在していた要素にのみハンドラーをバインドしています。次の方法でも実行できます。

または、アイテムを追加するときにここにハンドラーを追加します。

   function handleClick(){
      alert("halo");
   }

   $(".added").on("click", handleClick); //for the already existing elements

   $("#nextAdress").on("click",function (event) {
       event.preventDefault();
       $("#trainerRegistrationFields").append($('<div class="added">adsa</div>').on('click', handleClick));
   }