Question

I have a problem with my jQuery remove item from basket.

If I wait 10s or so after adding an item to the basket, it removes without issue.
If I add an item to the basket, realise I made a mistake then hit the remove button (within a few seconds), the page reloads – not what was intended.

I am guessing that this could be because the jQuery event has not been attached to the remove item from basket id as yet…

Is there any way of speeding this process up or is there something I have done wrong in my jQuery as it’s quite noticeable…

http://goldealers.co.uk/calc-test

Many thanks in advance.

I am binding to the event as follows:

jQuery(document).ready(function () {
jQuery('.remove').click(function(data) {
    var pid = jQuery(this).attr('name');
      jQuery.post('https://goldealers.co.uk/wp-content/plugins/gd/tables.php', 
        { pid: pid, remove: 'true' }, 
            function(data) {
                jQuery("#quoteTable").load("https://goldealers.co.uk/wp-content/plugins/gd/tables.php?table=quoteTable");
                jQuery("#quoteTotal").load("https://goldealers.co.uk/wp-content/plugins/gd/tables.php?table=quoteTotalTable");          
            },
        "json");        
    return false;
});

});

The Html which it binds to is:

<form method="post" action="">
<input type="hidden" name="remove" value="6" />
<input type="hidden" name="pid" value="6" />
<input type="image" src="https://goldealers.co.uk/media/delete.png" name="6" class="remove"/>
</form>

Answer 1

You need to make the event listener live. You can do this by changing it to:

$(document).on('click', '.remove', function(){
    ...
})