jQuery 工具覆盖:通过 ajax 添加的项目是否需要激活(或其他)?

发布于 10-18 13:41 字数 523 浏览 8 评论 0原文

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

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

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

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

I'm using jQuery Tools to set up some overlay forms and dialog boxes on my site. They've been working well so far, but a change to my site is raising some issues:

On the page containing the overlays, I'm doing some ajaxy stuff to add new items to the page. One of those items contains a link that is itself meant to trigger the overlay and present a form, just like the other items on the page. The addition of the item to the page is working correctly, but the link in that item does not open the form in the overlay. Rather, it gets opened in a separate page. When I refresh the page, the new item is there, and its link now properly opens in the overlay.

My suspicion is that just adding the item to the page isn't enough -- that I have to poke jQuery, or jQuery Tools, or something, so that some internal stuff gets set up that will connect the new item's link to the overlay. I'm thinking that this happens when the page is reloaded, since the "new" item is by then just another piece of content on the page, but it's not happening on the ajax call, since all that does is to insert some stuff into the page's DOM.

Am I right here, and (if I am), does anybody know what has to be poked or kicked in jQuery or tools to get these connections made? I've been looking for api calls named things like "activate" or "initialize", but without much luck... Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

泪是无色的血2024-10-25 13:41:35

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

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

并且你的页面中的某个地方有一些 javascript,看起来像这样:

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

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

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

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


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

I assume your ajax-added html link looks something like this:

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

And you have some javascript somewhere in your page that looks something like this:

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

The javascript shown here simply finds and applies the overlay plugin to all a elements that define a rel attribute. In a typical page (using something like jquery's document.ready()), the javascript gets run after the html is loaded, and so everything works out fine.

The problem here, is that your ajax operation adds the new link to the page after the javascript has already run, so the overlay plugin never gets attached to your ajax-added link; and without the overlay enhancement, the link functions like a normal html link -- opening the external page in a new window.

The solution is to simply run the javascript again after your ajax function completes. Assuming you're using jQuery.ajax to run your ajax request, you'll just need to provide a success handler in the settings object, and within there, just re-run the overlay javascript plugin as shown above.


EDIT: I should note that this is not the most efficient solution, as it will apply the overlay plugin to all the links in the page -- even those that already had it. You can, of course use a more specific selector to target only the links you've just added - but for most applications, it won't be a problem to just apply it again to everything.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文