ajaxコールで返された動的htmlで関数をバインドする方法

Question

最近、私は関数を開発していましたが、動的に生成されたHTMLにajax経由で関数を追加する必要があります。コードは次のようになります。何も印刷されませんconsole.log()ので、動作していないよう

$.ajax(
    'success': function(data){ 
     //do sth 
     a.html(res); 
     $(document).on('hover',sth in res,function(){ 
      console.log(1) 
      $(this).toggleClass('classA').toggleClass('classB'); 
     }) 
    } 
) 

。バインディングプロセスに問題はありますか？私は、マウスやクリックなどのホバーを変更し、それらのどれも動作していないようです。 ajax呼び出しの他の関数は正常に動作します。 HTMLは、動的に追加Event Delegationが便利です

Answer 1

、あなたのケースでは、イベントリスナーを付けること

$(document).on("click", "sth in res", function(event) { //Give proper selector in place of sth in res 
    console.log(1) 
    $(this).toggleClass('classA').toggleClass('classB'); 
}); 

また、あなたはむしろアヤックスsuccessデリゲートのうち、リスナーのコードを入れたいかもしれませんlike-何か$(document).ready(function() {});方法です。

sth in resクラス名は、1つのクラスではなく、3種類の異なるtagという名前を参照してください。あなたのためにこれの世話をします

$(document).on("click", ".sth.in.res", function(event) { //Give proper selector in place of sth in res 
    console.log(1) 
    $(this).toggleClass('classA').toggleClass('classB'); 
}); 

Answer 2

イベントの代表団 - uは、同時にすべての3つのクラスを持つ要素を選択したい場合は、セレクタは.sth.in.resになります。 （あなたがしたくない何かである）あなたのためにされて動作していない非委任アプローチ：

$(selector).on('click', function(){ ... }); 

動的にDOMに新しい要素を追加する場合は、次の手順を使用して、イベントの委任を実現することができます。

ここで

$(document).on('click','selector',function(){ ... }); 

は、あなたがより多くを学ぶことを始めるのに役立ついくつかのリンクです：

https://learn.jquery.com/events/event-delegation/

jquery Event Delegation