Question

我遇到了WooCommerce的问题。我想在点击添加到购物篮按钮后在jQuery中添加一些自定义脚本。没有我的脚本一切都很好，所以当我点击添加到篮子AJAX火灾和没有页面重新加载我有我的产品在篮子里。添加我的jQuery脚本后，它仍然有效，但是点击后它正在重新加载页面。为什么会这样？

<div class="uk-panel product-panel">
    <a href="#">
        <img width="300" height="300" src="#">
        <h3>Product title</h3>
    </a>
    <a rel="nofollow" href="/sklep/?add-to-cart=138" data-quantity="1" data-product_id="138" data-product_sku="SN435787" class="button product_type_simple add_to_cart_button ajax_add_to_cart k_pri_bg k_pri_contrast" title="Dodaj do koszyka">
        <i class="fa fa-cart-plus"></i>
    </a>
</div>

的jQuery

$(document).ready(function(){
    $('.product-panel .add_to_cart_button').click(function() {
        $(this).children('i').remove();
        $(this).append('<i class="fa fa-check-circle-o added-ok"></i>');
        /* Act on the event */
    });
});

Answer 1

使用event.preventDefault()停止链接重定向页面。

$('.product-panel .add_to_cart_button').click(function(event) {
    event.preventDefault();
    $(this).children('i').remove();
    $(this).append('<i class="fa fa-check-circle-o added-ok"></i>');
    /* Act on the event */
});

我的自定义脚本之后的WooCommerce AJAX重新加载页面

1 个答案: