Question

我在一个小应用程序中使用jQuery Tabs库。该页面有5个选项卡，每个页面的内容都使用Ajax加载。问题是，一旦我加载了一个标签，它就会保留在浏览器内存中（HTML元素也是如此）。因此，如果我使用let说一个与之前加载的选项卡具有相同ID的DIV元素，则与该ID相关的所有JS函数都会尝试与旧选项卡进行交互。

换句话说，假设我有一个包含2个标签的页面，“Traffic Data1”，“Traffic Data2”。首先，我点击Traffic Data1选项卡进行ajax调用并加载页面就好了。此页面有2个日期输入字段，第一个字段的id为“dateFrom”，另一个字段为“dateTo”。接下来是“开始”按钮。单击该按钮后，JS函数会显示一个警告框，其中包含每个输入字段中的值。

现在，我点击“Traffic Data2”标签。页面的内容非常不同，但它具有相同的输入字段，2表示日期（具有相同的ID）和Go按钮。当我按下此页面上的“开始”按钮时，我会在上一个选项卡中看到包含值的警告框。

所以我的问题是，有没有办法卸载以前的标签？或者是使用具有唯一div的元素的唯一选择（即使页面完全分开）。

由于

Answer 1

您不能拥有具有相同ID的多个元素。当您按ID找到元素时，始终会返回找到的第一个元素，因为期望ID是唯一的。

保持输入元素的name属性相同，但将其ID更改为唯一。

您可以按照name属性选择元素，如下所示：$('[name="foobar"]')

更新

在jQuery UI选项卡的文档中，有一个名为cache的选项，当设置为false时，应该在离开它们之后从DOM中删除旧选项卡：

是否缓存远程标签内容，例如只加载一次或随着每一次点击。缓存内容正在延迟加载，例如一次和第一次点击只有一次。注意，要防止实际的Ajax 您需要提供额外的浏览器缓存请求 cache：ajaxOptions的false标志。

来源：http://jqueryui.com/demos/tabs/

Answer 2

您正在寻找jQuery Live。

说明：为现在和将来与当前选择器匹配的所有元素附加事件处理程序。

如果你使用它，jQuery会神奇地自动更新，以匹配你的新元素出现/消失。

// code sample
$("a.offsite").live("click", function(){ alert("Goodbye!"); });

Answer 3

如果您可以将上下文传递给jquery函数，则可以相对于当前选定的选项卡进行调用...

$("#someDuplicatedId", activeTab).doStuff();

或者，如果缓存内容并不重要，请使用Jasper的答案。

Answer 4

由于标签点击事件会重新加载您的表单，并假设您使用div来包含加载了ajax的内容，因此请在.click(function () { $(this).children('div').children.remove(); })声明中添加tabs()。

这应该删除div内容和绑定它的任何事件处理程序。

jQuery标签中的ID相同

4 个答案:

更新