Question

我想知道爲什麼我無法對使用.loaddata函數加載的按鈕執行jquery函數。

<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> 

從loadData函數 '味精' 回報是：

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

當我按一下按鈕，它沒有執行該功能。

Answer 1

這是因爲您使用.click()而不是.on()。您使用的綁定名爲「直接」綁定，它只會將處理程序附加到已存在的元素。它不會被綁定到未來創建的元素上。要做到這一點，您必須使用on()創建「委託」綁定。

從documentation of .on()：

委託事件有優勢，他們可以處理來自被添加到該文件在稍後的時間後代元素的事件。

所以結合.addcart元素與.on()這樣的：

$(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(); 
    }) 
});