jQuery 选项卡和 Ajax - 如何设置页面？

Question

我已经开始使用 jQuery 的 UI 选项卡，它们在大多数情况下都工作得很好，但我遇到了一些问题。当我在选项卡之间来回切换时，当我返回该选项卡时，某些项目的功能会丢失。这让我怀疑我的结构是否正确。谷歌搜索没有结果，所以我决定在这里提问。

所以问题是:如果我有通过 Tabs + AJAX 拉入的页面，并且这些新页面具有我想要使用 jQuery 的功能，那么我应该将该 jQuery 放在哪里？我现在的结构如下:

带有选项卡的页面:main_page.php该页面上有两个选项卡:一个通过 AJAX 拉入“page1.php”，另一个拉入“page2.php”。

page1 有它自己的元素，然后我在其上使用 jQuery。 jQuery 代码去哪里了？它是在 main_page.php 还是 page1.php 上？

现在我已经将其放在 page1 上，我认为这是正确的，但这会产生其他问题，所以我只是想仔细检查一下是否正确。

Answer 1

请将所有 javascript 放在单独的 .js 文件中。分离数据 (html)、表示 (css) 和行为 (javascript、flash...)。它将简化应用程序的维护和扩展。您和其他人有一天可能必须维护它。

关于您的问题:由于您切换选项卡，新加载的内容不会附加任何行为。为什么？当您第一次加载页面并加载 JavaScript 时，它将仅适用于 DOM 的当前状态(如果您愿意，可以是 html 结构)。当您单击另一个选项卡时，您通过 ajax 加载内容，因此页面不会刷新，这意味着:这个新内容不会应用该 javascript，因为当 javascript 启动时它不可用第一名。所以你有两个选择:

• 将该 javascript 与您加载的 html(在其之后)一起注入(inject)。这是不好的做法，但它确实有效。
• 您使用 jquery live()函数来绑定(bind)事件。这是正确的选择。

使用 live()，行为将始终附加到 DOM 元素。

所以而不是

$('#myel').bind('click',dothis());

你会

$('#myel').live('click',dothis());

这样，无论显示哪个选项卡，其内容都将具有绑定(bind)的功能，而无需重新附加它。