Потеря обработчиков событий для элементов таблицы в jQuery после AJAX

Question

Я прикрепляю некоторые mouseenter и mouseleave события к различным tr элементам внутри таблицы.Содержимое таблицы обновляется через AJAX после поискового запроса.

Страница не перезагружается, содержимое таблицы (или ее элементы «tr» обновляются через AJAX без перезагрузки страницы.)

Похоже, что обработчики событий не отвечают.Они перестают добавлять и удалять класс, который я хотел.Если я вручную помещу код в консоль браузера и нажму Enter.Браузер снова начинает добавлять / удалять эти классы в ответ на обработчики событий.

Может кто-нибудь подсказать, как можно убедиться, что все элементы tr все еще прослушивают события после обновления AJAX?

Сначала я использовал следующий код:

$(".track-table tbody tr").on("mouseenter", function(e) {
  $(this).addClass("currently-active");
});

$(".track-table tbody tr").on("mouseleave", function(e) {
  $(this).removeClass("currently-active");
});

Поняв, что элементы td, на которых jQuery прослушивал эти события, исчезли, я начал использовать делегирование событий.

$("table").on("mouseenter", ".track-table tbody tr", function(e) {
   $(this).addClass("currently-active");
});

$("table").on("mouseleave", ".track-table tbody tr", function(e) {
   $(this).removeClass("currently-active");
});

Однако события по-прежнему не фиксируются.Я попытался запустить обработчики событий внутри события submit:

$("form").on("submit", function(e) {
   $(".track-table tbody tr").on("mouseenter", function(e) {
     $(this).addClass("currently-active");
   });

   $(".track-table tbody tr").on("mouseleave", function(e) {
     $(this).removeClass("currently-active");
    });
});

Мой вопрос заключается в том, как сохранить слушатели событий "живыми" после обновления документа AJAX.

Answer 1

Вы пошли в правильном направлении, да, но вам нужно использовать какой-то "внешний" элемент, который всегда присутствует, и да, использовать делегирование.Пример.

$(document).on('mouseenter', '.track-table tbody tr', function(){

});

Answer 2

Использовать делегирование события .on(), но вместо этого прикрепить его к body, например:

$("body").on("mouseenter", ".track-table tbody tr", function(e) {
    $(this).addClass("currently-active");
});

$("body").on("mouseleave", ".track-table tbody tr", function(e) {
    $(this).removeClass("currently-active");
});