Реактивировать код после использования фильтра

Question

Я не очень знаком с jQuery в сочетании с jQuery Migrate. Сайт, на котором я работаю, использует jQuery 1.12 с версией Migrate 1.4.1.

После некоторого поиска приведенный ниже скрипт отлично работает при загрузке страницы:

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

Но после некоторого фильтра, построенного по старинке, этот слушатель "забывается".

Что делать?

Answer 1

Вы удаляете элемент, к которому прикреплен слушатель. Это происходит, вероятно, во время фильтрации. Вы можете обойти это поведение, если установите слушателя на родительский элемент, который вообще не удаляется (например, в <td> <table> элемент). Я бы не поставил слушателя на верхний уровень (document), потому что гораздо эффективнее установить его на родителя, который не удаляется. Если вы установите слушателя на documentкаждый клик отслеживается и ищется .single_add_to_cart_button элемент.

Вы можете установить слушателя на родителя, но реагировать только на клики .single_add_to_cart_button если вы используете следующий фрагмент:

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

Если элементы, которые соответствуют .single_add_to_cart_button удалены и повторно добавлены, вам нужно использовать делегирование или поместить слушателя в элемент, который всегда там (тело, документ), и затем запускать его только в элементах, которые соответствуют вашему запросу, как таковой:

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