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

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 */
});