jQuery 选项卡中的相同 ID

Question

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

换句话说，假设我有一个包含 2 个选项卡的页面，“流量数据 1”、“流量数据 2”。现在，首先，我单击 Traffic Data1 选项卡，该选项卡可以进行 ajax 调用并加载页面。此页面有 2 个日期输入字段，第一个字段的 ID 是“dateFrom”，另一个字段是“dateTo”。旁边是一个“开始”按钮。单击按钮后，JS 函数会显示一个警告框，其中包含每个输入字段中的值。

现在，我单击“流量数据2”选项卡。页面的内容非常不同，但具有相同的输入字段，2 个日期（具有相同的 ID）和“Go”按钮。当我按下此页面上的“执行”按钮时，我会看到警告框，其中包含上一个选项卡中的值。

所以我的问题是，有没有办法卸载以前的选项卡？或者是使用具有唯一 div 的元素的唯一替代方案（即使页面完全独立）。

谢谢

Answer 1

不能有多个具有相同 ID 的元素。当您通过 ID 查找元素时，始终返回找到的第一个元素，因为 ID 应该是唯一的。

保持输入元素的

name

属性相同，但将其 ID 更改为唯一。

您可以通过其

name

属性来选择元素，如下所示：

$('[name="foobar"]')

更新

在 jQuery UI 选项卡的文档中，有一个名为

cache

的选项，当设置为

false

时，应在您离开旧选项卡后从 DOM 中删除旧选项卡：

是否缓存远程选项卡内容，例如仅加载一次或 每次点击。缓存内容被延迟加载，例如一次和 第一次点击仅一次。请注意，要防止实际的 Ajax 请求被浏览器缓存，您需要提供额外的 缓存：ajaxOptions 的错误标志。

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

Answer 2

您正在寻找 jQuery Live。

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

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

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

Answer 3

由于选项卡单击事件会重新加载您的表单，并假设您使用 div 来包含 ajax 加载的内容，请将

.click(function () { $(this).children('div').children.remove(); })

添加到您的

tabs()

声明中。

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

Answer 4

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

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

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