点击事件在AJAX过滤器操作DOM后不会激活

时间:2015-01-18 01:54:33

标签: php jquery ajax wordpress woocommerce

我正在开发一个电子商务网站,该网站上有AJAX过滤器,可根据每个产品属性操作dom。

我正在编写另一个AJAX调用,以便在点击时为每个产品提取更多产品属性。<​​/ p>

Here is the link to the dev site

这是我的AJAX电话

$('.each-product').on('click', function (e) {

    /** Prevent Default Behaviour */
    e.preventDefault();

    /** Get Post ID */
    var post_id = $(this).attr('id');
    var response_class = '.' + post_id + '-ajax-response';


    /** Ajax Call */
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: { action: 'product_extra_info', id: post_id },
        beforeSend: function () {
            $(response_class).show().html("Loading...");
        },
        success: function (data) {
            $(response_class).show().html(data);
            //alert(data);
        }

    });
    return false;
});

1 个答案:

答案 0 :(得分:0)

请参阅.on事件委派。使用click,您无法绑定到动态添加到DOM的内容。将代码切换为使用on看起来像:

$('.products').on('click', '.each-product', function (e) {

    /** Prevent Default Behaviour */
    e.preventDefault();

    /** Get Post ID */
    var post_id = $(this).attr('id');
    var response_class = '.' + post_id + '-ajax-response';


    /** Ajax Call */
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: { action: 'product_extra_info', id: post_id },
        beforeSend: function () {
            $(response_class).show().html("Loading...");
        },
        success: function (data) {
            $(response_class).show().html(data);
            //alert(data);
        }

    });
    return false;
});