WooCommerce AJAX reload page after my custom script

Question

I have problem with WooCommerce. I want to add some custom script in jQuery after I click add to basket button. Without my script everything works good so when I click add to basket AJAX fires and without page reload I have my product in basket. After I add my jQuery script it still works but it is reloading page after click. Why this is happening?

<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

Use event.preventDefault() to stop link from redirecting the page.

$('.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 */
});