JQueryによって追加される要素にコールバック関数を追加する方法

コールバック関数は、JQueryによって追加される要素では機能しません。私の例では親部門とclass=parentがあります。それをクリックすると、<span class="child">Child</span>が追加されています。しかし、私が子供をクリックすると、メッセージに警告は出ません。 .childは、通常のイベントリスナは、将来的に発生したチャイルズにclickを登録しません動的な追加要素があるので、JQueryによって追加される要素にコールバック関数を追加する方法

<html> 
    <head> 
     <style> 
      .parent{ 
       width: 50px; 
       height: 30px; 
       line-height: 30px; 
       background-color: #232323; 
       color: #fff; 
       text-align: center; 
      } 

      .child{ 
       width: 50px; 
       height: 30px; 
       line-height: 30px; 
       background-color: #f3b556; 
       color: #232323; 
       text-align: center; 
       margin-top: 10px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="parent"> 
      <span>Parent</span> 
     </div> 


     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script> 
      $('.parent').click(function(){ 
       alert('parent clicked'); 
       $(this).after("<span class='child'>child</span>"); 
      }); 
      $('.child').click(function(){ 
       alert('child clicked'); 
      }); 
     </script> 
    </body> 
</html>

出典

2016-08-12 Shan Biswas

.clickの代わりに '.on'を使用する必要があります。この答えを見てください。http://stackoverflow.com/a/1207393/1270865 – cafebabe1991

利用ライブ委任以下の例を参照してください。

$("body").on("click", ".child", function(){ 
    alert('child clicked'); 
});

出典

2016-08-12 10:53:47 eisbehr

$（document）.on（「クリック」、「子」、function（）{}）も機能しますか？ – mayk

はい、それもうまくいくでしょう。しかし、最良の方法は最も近いセレクタを選択することです。この例では 'body'でしょう。 @mayk – eisbehr

偉大な、それは動作します、ありがとうございます –

-1

のDOM manuplationが発生している、そしてそれは$('.child').click(function())関数に通過すると、それが操作するDOMの任意の個々の要素を見つけることができませんでした。この要素を動的に追加するには、クラスを動的に追加した後でイベントをバインド/登録して、イベントを登録してそれをリスンする必要があります。あなたが

$('.parent').click(function(){ 
       alert('parent clicked'); 
       $(this).after("<span class='child' onclick='ChildelementClick()'>child</span>"); 
      }); 
function ChildelementClick(){ 
// do somehing 
}

によってこれを行うことができますそれとも、あなたは親からのイベントを委任することができます@eisbehr

出典

2016-08-12 11:00:49

によって与えられた例を使用することができます。

新しいオブジェクトを作成すると、以前は同じクラスの他の要素に追加できるイベントリスナーが欠けています。

既存inmutable親にリスナーを追加する場合は、それは常に動作します。このように

$("#existingContainer").on("click", ".child", function() { 
    //whatever 
})

、イベントが#existingContainerに捕獲されていますが、コールバックは、それがキャプチャだときにのみ実行されます#chistingContainerの内側にある ".child"オブジェクトの内部で、イベントリスナーの作成後にこの.childオブジェクトが追加されたかどうかにかかわらず

出典

2016-08-12 11:02:58 Bardo

JQueryによって追加される要素にコールバック関数を追加する方法

答えて

関連する問題