jQuery ajax调用后，具有相同id的事件停止工作

jQuery after ajax call, events with the same Ids stopped working

本文关键字：id 事件停止工作调用 ajax jQuery 更新时间：2023-09-26

不确定这是一个bug还是我不应该这样做

我有一个带有侧栏的页面，它可以动态加载主体。

对于page1，我有一个元素#id1的回调，它在初始加载时工作。

在用户导航到page2后，主要内容将被page2的内容所取代，其中也有一个具有#id1的元素，它们具有相同的目的。事件也在那里初始化。

问题是第2页上的所有内容都可以工作，除了与#id1相关的事件。

如果返回到第1页，#id1将不能正常工作。

查看控制台后，我发现在调用$("#id1")时有时会给我初始加载元素(而不是销毁?)，这可能是原因。

ajax加载只是使用:

$.get(path, function(data) {$('#main').html(data)});

你知道这是怎么回事吗?

如果旧的元素没有"在jquery中正确销毁"，应该在这里做什么呢?

虽然不清楚您要绑定的确切内容，但解决方案是使用(取决于您的jQuery版本)live()或on()来确保绑定到执行时不在DOM中的元素。

jQuery 1.7+: on()

$(document).on('click', '.selector', function() { ... });

jQuery <1.7: live()

$('.selector').live('click', function() { ... });

记住一个ID只能出现一次

因为您不知道在Ajax调用之后，ID 's的哪些元素可能仍然存在于DOM中，因此您应该坚持使用classname 's。

你可以使用jQuery的.live()来绑定已经动态加载的元素

您必须为此生成动态id。当您单击右侧栏选项时，将生成id并将id放置在body元素"id"标记中。这样您就知道哪个id是为哪个页面生成的。在"onclick"事件上调用javascript函数，并将id传递给该函数，然后将body元素调用为$("#id"+that generated_id).something;我想这会有帮助。