Потеря обработчиков событий в элементах таблицы в jQuery после AJAX
Я прикрепляю некоторые события 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 обновит документ.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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");
});
Боюсь, что моя была опубликована первой перед другой (вы можете проверить время публикации)
Прикрепление события к телу только для того, чтобы гарантировать, что событие будет прикреплено на основе элемента, который будет всегда загружаться ... track-table не будет работать, поскольку он будет обновляться динамически и потеряет событие. (Боковое примечание, прикрепление события на основе body более эффективно, чем document)
Да, вы пошли в правильном направлении, но вам нужно использовать какой-то «внешний» элемент, который всегда присутствует, и да, использовать делегирование. Бывший.
$(document).on('mouseenter', '.track-table tbody tr', function(){
});
Спасибо, Даниэль. :) Я немного запутался. Указатель мыши всегда будет внутри документа. Итак, когда же будет уволен mouseleave?
Дело не в событии, а в элементе .track-table tbody tr. Это то, что заменяется ajax и является динамическим, поэтому для того, чтобы прикрепить другого слушателя к этому новому динамическому элементу, вы должны использовать некоторый «внешний» элемент, который загружается при загрузке страницы. document или body - ваши лучшие варианты. Поэтому, когда вызов ajax выполнен, вы снова присоединяете события к этим новым элементам, используя синтаксис выше.
Сначала я попробовал другой ответ, потому что он был опубликован несколькими моментами ранее. Думаю, это тоже сработает. Однако я немного запутался. Указатель мыши всегда будет внутри тела. Итак, когда же будет уволен
mouseleave?