Reactivate code after filter is used

Question

I am not very known with jQuery in combination with jQuery Migrate. The site I am working on uses jQuery 1.12 with Migrate version 1.4.1

After some searching the below script works fine at page load:

jQuery(".single_add_to_cart_button").click(function(e) {
    e.preventDefault();
    var url = jQuery(this).data('href');
    window.open(url, '_blank');
    return false;
});

But after some filter build the old fashioned way, this listener is 'forgotten'.

What to do?

Answer 1

You are removing the element, where the listener is attached to. This happens probably at the filtering time. You can circumvent that behavior, if you set the listener on a parent element, which is not being removed at all (e.g. in a <td> the <table> element). I would not set the listener at the top level (document), because it is much more performing to set it on a parent, which is not being removed. If you set the listener to the document, every click is being watched and searched for the .single_add_to_cart_button element.

You can set the listener to the parent, but only reacting to clicks on .single_add_to_cart_button if you use the following snippet:

jQuery("#tableWithId").on("click", ".single_add_to_cart_button", function(e) {
    e.preventDefault();
    var url = jQuery(this).data('href');
    window.open(url, '_blank');
    return false;
});

Answer 2

If the elements that match .single_add_to_cart_button are removed and re-added, you need to use delegation aka place the listener on an element that's always there (body, document) and then only run it on elements that match your given query, as such:

jQuery(document).on('click', '.single_add_to_cart_button', function (e) {
    e.preventDefault();
    var url = jQuery(this).data('href');
    window.open(url, '_blank');
    return false;
});