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 上？

现在我一直把它放在第 1 页上，我认为这是正确的，但这产生了其他问题，所以我只是想仔细检查一下，看看是否正确。

Answer 1

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

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

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

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

所以而不是

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

你会的

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

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