.loaddataを使用した後に関数をトリガーする方法

Question

.loaddata関数でロードされたボタンでjquery関数を実行できないのはなぜかと思います。 loaddataの機能から

<div id="products"></div> 

<script> 
$(document).ready(function(event) { 
    loadData(1,'default'); 
}); 

function loadData(page,type){ 
    var base = '<?php echo $sr_class->baseURL();?>'; 
    $.ajax 
    ({ 
     type: "GET", 
     url: base+"includes/module/loadProduct.php", 
     data: {page:page,type:type}, 
     success: function(msg) 
     { 
      console.info(msg); 
      $("#products").html(msg); 
     } 
    }); 
} 
$('.addcart').click(function(e){ 
    e.preventDefault(); 
    var proid = $(this).attr('proid'); 
    var base = '<?php echo $sr_class->baseURL();?>'; 
    $.post(base+'includes/module/addtocart.php',{p_id:proid, p_qty:1},function(result){ 
     location.reload(); 
    }) 
}); 

</script> 

たmsgリターンは次のとおりです。

<p><a proid="ABCD1001" class="btn btn-success addcart" role="button"> ABCD1001</a></p> 

私はボタンをクリックすると、それが機能を実行しませんでした。

Answer 1

.on()の代わりに.click()を使用しているためです。あなたが使用しているclick()バインディングは、直接存在する要素にのみハンドラをアタッチする「直接」バインディングと呼ばれます。これは、将来作成される要素に束縛されません。これを行うには、on()を使用して「委任」バインドを作成する必要があります。 documentation of .on()から

：

委任イベントは、彼らが後で文書に追加されている子孫要素からのイベントを処理できるという利点があります。

したがって、このような.on()で.addcart要素をバインド：htmlコードがdynamicalyロードした場合

$(document).on('click','.addcart',function(e){ 
    e.preventDefault(); 
    var proid = $(this).attr('proid'); 

    $.post('<?php echo $sr_class->baseURL();?>includes/module/addtocart.php',{p_id:proid, p_qty:1},function(result){ 
     location.reload(); 
    }) 
});