让 jQuery 插件作用于动态加载的（ajax）内容答案

【问题标题】：Getting jQuery plugin to act on dynamically loaded (ajax) content让 jQuery 插件作用于动态加载的（ajax）内容
【发布时间】：2010-06-29 01:51:43
【问题描述】：

我有一个 jQuery 插件（颜色框），它加载一个模式弹出窗口（带有一个外部 html 文件）。

到目前为止我的过程：

我尝试从永恒的 html（弹出窗口）加载和初始化滚动条 jQuery 和 CSS，但我的 div 消失了。
然后我尝试在父窗口中加载滚动条 jQuery 并在颜色框回调中对其进行初始化...这次我的 div 没有消失，但滚动条和箭头（甚至是 OS 标准箭头）确实消失了。
最后，我将滚动条 CSS 放入 <style> 标签中，并将其塞入永恒 html 文件的 <body> 标签中。这适用于所有主要浏览器，但是，现在您无法退出弹出窗口。啊！

所以我想我的问题是：如何让 jQuery 插件及其 CSS 文件在动态加载的内容上进行初始化？什么去哪里（包括 jQuery 库本身）？

谢谢！

【问题讨论】：

您准备好使用文档了吗？如果是这样，我相信您需要更改为 .live。你也可以让你的ajax返回JS被执行。

标签： css jquery-plugins load colorbox jscrollpane

【解决方案1】：

如果您使用的是“window.open”类型的弹出窗口，那么我会说让它更简单一些，并将其作为一个 JQueryUI 对话框引入您的页面，该对话框会拉入您的外部 html 文件是内容，加载它在 DIV 中并在一般页面上下文中可访问，也继承了 JQuery 和 CSS。这个的简单形式应该是这样的：

$("#id").load(url).dialog();

#id 是隐藏的 DIV，将包含您的对话数据，而 URL 是弹出窗口中 html 文件的外部 url。

【讨论】：

不幸的是，它是一个模态的、窗口内的弹出窗口……很像 JQueryUI 对话，但它是一个不同的插件。我已经按照你的建议进行了设置。
嗨 REW...我刚刚想通了！我使用了 iframe，因为我的插件只是从 body 标签中提取信息（因此没有加载其他插件所需的 CSS 来加载）。感谢您花时间考虑我的问题！
哦，我明白了。我的建议是在调用页面中加载 jScrollPane 和 colorbox 插件，DIV 将继承基础文档的全部范围。

【解决方案2】：

找到解决方案....

我的问题专门针对将 colorbox（一个 jQuery 灯箱插件）与 jScrollPane（一个 jQuery 自定义滚动条插件）集成。我使用颜色框加载内容的 ajax 调用有效，但是 jScrollPane 无法启动，因为未加载所需的内容（因为 ajax 调用没有从 head 标签中提取任何信息）。

如果其他 Stack Overflowers 偶然发现了类似的问题，我就是这样做的：使用 iframe 而不是 ajax 调用。哎呀。呵呵。

我不知道 colorbox 是否是唯一一个仅从 body 标签而不是 head 提取信息的插件，但我想许多插件在处理外部文件时都是这样工作的。如果这是您的问题，请使用 iframe 确保您的 head 标记中的数据被提取。

感谢堆栈溢出！我还是爱你。

【讨论】：