php - 使用.loaddata后如何触发函数

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 函数的“msg”返回是：

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

当我单击按钮时，它没有执行该功能。

Answer 1

那是因为您使用的是.click()而不是.on(). 您正在使用的click()绑定称为“直接”绑定，它只会将处理程序附加到已经存在的元素。它不会绑定到将来创建的元素。为此，您必须使用on().

从以下文档.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();
    })
});