ajaxでロードされたコンテンツと動的IDのクリックイベント

Question

ajaxを使用してコンテンツを読み込みました。 ajaxロードされたコンテンツを呼び出す必要があります。私もいくつかのコードを試してみましたが、これで運がありません。

jQuery(document).ready(function(){ 
     var itemId = '<?php echo $_item->getId(); ?>'; 

     jQuery("#cart-sidebar").on("click", '.increment_qty_'+itemId, function(event) { 
      console.log("work"); 
     }); 

     jQuery("#cart-sidebar").on("click", '.increment_qty_<?php echo $_item->getId(); ?>', function(event) { 
      console.log("work"); 
     }); 
}); 

Answer 1

文書化するためにイベントをバインドしようとすると、これは、Ajaxによってロードされたコンテンツにイベントハンドラをアタッチする2通りの方法があります要素がDOMで発見されたときに、それは

jQuery(document).ready(function(){ 
     var itemId = '<?php echo $_item->getId(); ?>'; 

      jQuery(document).on("#cart-sidebar","click", '.increment_qty_'+itemId, function(event) { 
      console.log("work"); 
     }); 

     jQuery(document).on("#cart-sidebar","click", '.increment_qty_<?php echo $_item->getId(); ?>', function(event) { 
      console.log("work"); 
     }); 
}); 

Answer 2

を焼成することができることを保証します。

1. は、Ajaxリクエストの行われ、コールバックにイベントを接続します。 （参照：jQuery Ajax）

   $.ajax({ 
       url: "xyz.php", 
   }) 
   .done(function(content) { 
       $("#cart-sidebar").on("click", '.increment_qty_'+itemId, function(event) { 
         console.log("work"); 
       }); 
   }); 
   

2. 使用Event Delegate。これにより、将来のでも、要素にイベントリスナーを割り当てることができます。

Answer 3

ただ、好きですか：

jQuery(document).ready(function(){ 
     var itemId = '<?php echo $_item->getId(); ?>'; 

     jQuery(document).on("click", '.increment_qty_'+itemId, function(event) { 
      console.log("work"); 
     }); 


});