jQuery 选项卡中的相同 ID
我在一个小型应用程序中使用 jQuery Tabs 库。该页面有 5 个选项卡，每个页面的内容都是使用 Ajax 加载的。问题是，一旦我加载了一个选项卡，它就会保留在浏览器内存中（它的 HTML 元素也是如此）。因此，如果我使用与先前加载的选项卡具有相同 ID 的 DIV 元素，则与该 ID 相关的所有 JS 函数都会尝试与旧选项卡进行交互。
换句话说，假设我有一个包含 2 个选项卡的页面，“流量数据 1”、“流量数据 2”。现在，首先，我单击 Traffic Data1 选项卡，该选项卡可以进行 ajax 调用并加载页面。此页面有 2 个日期输入字段，第一个字段的 ID 是“dateFrom”，另一个字段是“dateTo”。旁边是一个“开始”按钮。单击该按钮后，JS 函数会显示一个警告框，其中包含每个输入字段中的值。
现在，我单击“流量数据2”选项卡。页面的内容非常不同，但具有相同的输入字段，2 个日期（具有相同的 ID）和“Go”按钮。当我按下此页面上的“执行”按钮时，我会看到一个警告框，其中包含上一个选项卡中的值。
所以我的问题是，有没有办法卸载以前的选项卡？ Or 是使用具有唯一 div 的元素的唯一替代方案（即使页面完全独立）。
谢谢
I am using the jQuery Tabs library in a small application. The page has 5 tabs and the content for each page is loaded using Ajax. The problem is, once I load a tab, it remains in the browsers memory (and so do its HTML elements). So if I use lets say a DIV element with the same ID as a previously loaded tab, all JS function related to that ID try to interact with the old tab.
IN other words, lets say I have a page with 2 tabs, "Traffic Data1", "Traffic Data2". Now first, I click on the Traffic Data1 tab which makes the ajax call and loads the page just fine. This page, has 2 date input fields, ID for the first field is "dateFrom" and the other field is "dateTo". Next to that is a "Go" button. Upon clicking the button, a JS function shows an alert box with the values in each of the input fields.
Now, I click on the "Traffic Data2" tab. The contents of the page are very different, but it has the identical input fields, 2 for dates (with same IDs) and Go Button. When I press the Go button on this page, I see the alert box with values form the previous tab.
So my question is, Is there a way to unload the previous tab? Or is the only alternative to use elements with unique divs (even though the pages are complete separate).
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
多个元素不能具有相同的 ID。当您通过 ID 查找元素时，始终返回找到的第一个元素，因为 ID 应该是唯一的。
保留输入元素的
name属性不变，但将其 ID 更改为唯一。您可以通过元素的
name属性来选择元素，如下所示：$('[name="foobar"]')更新
在 jQuery UI 选项卡的文档中，有一个选项称为
cache，当设置为false时，应在您离开旧选项卡后从 DOM 中删除旧选项卡：来源：http://jqueryui.com/demos/tabs/
You cannot have multiple element with the same ID. When you find an element by ID the first one found is always returned because it is expected that IDs will be unique.
Leave the
nameattributes for the input elements the same but change their IDs to be unique.You can select an element by its
nameattribute like this:$('[name="foobar"]')Update
In the docs for jQuery UI Tabs there is an option called
cachethat when set tofalseshould remove the old tabs from the DOM after you navigate away from them:Source: http://jqueryui.com/demos/tabs/
您正在寻找 jQuery Live。
描述： 为现在和将来与当前选择器匹配的所有元素附加一个事件处理程序。
如果您使用它，jQuery 将神奇地自动更新以在新元素出现/消失时匹配它们。
You are looking for jQuery Live.
Description: Attach an event handler for all elements which match the current selector, now and in the future.
If you use it jQuery will magically auto-update to match your new elements as they appear/disapear.
由于选项卡单击事件会重新加载表单并假设您使用 div 来包含 ajax 加载的内容，因此添加
.click(function () { $(this).children('div').children.remove( ); })到您的tabs()声明。这应该删除 div 内容以及绑定到它的任何事件处理程序。
Since the tabs click event reloads your form and assuming you're using divs to contain the ajax-loaded content, add
.click(function () { $(this).children('div').children.remove(); })to yourtabs()declaration.That should remove the div content and any event handlers that are bound to it.
如果您可以将上下文传递给 jquery 函数，您可以相对于当前选定的选项卡进行调用...
或者如果缓存内容并不重要，请使用 Jasper 的答案。
If you can pass a context to the jquery functions, you could make your calls relative to currently selected tab...
Or if caching the content is not important, go with Jasper's answer.