jQuery 工具覆盖 : do items added through ajax need to be activated (or something)?

Question

我正在使用 jQuery 工具在我的网站上设置一些覆盖表单和对话框。到目前为止，它们运行良好，但对我的网站的更改引发了一些问题:

在包含叠加层的页面上，我正在执行一些 ajaxy 操作来向页面添加新项目。其中一个项目包含一个链接，该链接本身旨在触发覆盖并呈现一个表单，就像页面上的其他项目一样。向页面添加项目工作正常，但该项目中的链接无法打开叠加层中的表单。相反，它会在单独的页面中打开。当我刷新页面时，新项目就在那里，并且它的链接现在可以在叠加层中正确打开。

我怀疑仅仅将项目添加到页面是不够的——我必须使用 jQuery、jQuery 工具或其他东西，以便设置一些内部内容来将新项目的链接连接到覆盖层。我认为这种情况发生在页面重新加载时，因为"new"项目此时只是页面上的另一部分内容，但它不会发生在 ajax 调用上，因为所做的只是将一些内容插入到页面的 DOM。

我就在这里吗？(如果我在)，有人知道需要在 jQuery 或工具中插入或踢出什么才能建立这些连接吗？我一直在寻找名为“activate”或“initialize”之类的 api 调用，但运气不佳...谢谢!

Answer 1

我假设你的ajax添加的html链接看起来像这样:

<a href="external-content.htm" rel="#overlay">Do It</a>

并且您的页面中的某处有一些 javascript，如下所示:

$('a[rel]').overlay({ 
   /* your options here */
});

此处显示的 JavaScript 只是查找覆盖插件并将其应用到定义 rel 属性的所有 a 元素。在典型的页面中(使用 jquery 的 document.ready() 之类的东西)，JavaScript 在 html 加载后运行，因此一切正常。

这里的问题是，您的 ajax 操作在 javascript 运行之后将新链接添加到页面，因此覆盖插件永远不会附加到您的 ajax 添加的链接；如果没有覆盖增强功能，链接的功能就像普通的 html 链接一样——在新窗口中打开外部页面。

解决方案是在 ajax 函数完成后再次运行 JavaScript。假设您使用 jQuery.ajax 来运行 ajax 请求，您只需在 settings 对象中提供一个 success 处理程序，在其中，只需重新运行覆盖 JavaScript 插件，如上所示。

<小时/>

编辑:我应该注意，这不是最有效的解决方案，因为它将覆盖插件应用于页面中的所有链接 - 即使是那些已经拥有它的链接。当然，您可以使用更具体的选择器来仅定位您刚刚添加的链接 - 但对于大多数应用程序来说，将其再次应用于所有内容都不会成为问题。