AJAX后在jQuery中释放表元素上的事件处理程序
AJAX后在jQuery中释放表元素上的事件处理程序
提问于 2018-09-30 20:30:41
我在表中的不同mouseenter元素上附加了一些tr和mouseleave事件。表中的内容在搜索查询后通过AJAX更新。
页面不重新加载，表内容(或其"tr“元素通过AJAX更新而不重新加载页面)。
这似乎使事件处理程序没有响应性。他们停止添加和删除我想要的类。如果我手动将代码放入浏览器控制台并按回车。浏览器再次开始添加/删除这些类，以响应事件处理程序。
有人能建议我如何确保AJAX更新后所有的tr元素仍然在监听事件吗？
我最初使用的代码如下：
$(".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更新文档之后，如何保持事件侦听器“活动”。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-30 20:35:53
使用事件委托.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");
});Stack Overflow用户
发布于 2018-09-30 20:36:18
您已经走到了正确的方向，是的，但是您需要做的是使用一些“外部”元素，它总是存在的，是的，使用委托。例如。
$(document).on('mouseenter', '.track-table tbody tr', function(){
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52581884
复制相关文章
相似问题
腾讯云开发者
