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()绑定称为＆＃34; direct＆＃34;绑定只会将处理程序附加到已存在的元素。它不会受到未来创建的元素的约束。要做到这一点，你必须创建一个＆＃34;委托＆＃34;使用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();
    })
});

使用.loaddata后如何触发功能

1 个答案: