让 jQuery 插件对动态加载 (ajax) 内容起作用
我有一个 jQuery 插件（colorbox），它加载一个模式弹出窗口（带有外部 html 文件）。 <-- 本身就可以完美工作。我有另一个 jQuery 插件 (jScrollPane)，可以加载 div 的自定义滚动条。 <-- 它本身也能完美运行。两者都有一个 JS 组件和一个 CSS 组件。
到目前为止我的过程：
- 我尝试从永恒的 html（弹出窗口）加载并初始化滚动条 jQuery 和 CSS，然后我的 div 消失了。
- 然后我尝试在父窗口中加载滚动条 jQuery 并在 colorbox 回调中初始化它...这次我的 div 没有消失，但滚动条和箭头（甚至操作系统标准箭头）确实消失了。
- 最后，我将滚动条 CSS 放入
所以我想我的问题是：如何让 jQuery 插件及其 CSS 文件在动态加载的内容上进行初始化？什么去了哪里（包括 jQuery 库本身）？
谢谢！
I have one jQuery plugin (colorbox) that loads a modal popup window (with an external html file). <-- works perfectly by itself. I have another jQuery plugin (jScrollPane) that loads custom scroll bars for divs. <-- it too works perfectly by itself. Both have a JS component and a CSS component.
My process thus far:
- I tried to load and initialize the scroll bar jQuery and CSS from the eternal html (popup) and my div disappeared.
- Then I tried to load the scroll bar jQuery in the parent window and initialize it in the colorbox callback...this time my div didn't disappear but the scroll bar and arrows (even OS standard arrows) did disappear.
- Finally, I put the scroll bar CSS in
<style>tags and shoved it inside the eternal html file's<body>tags. That works on all major browsers, however, now you can't exit the popup window. Arg!
So I think my question is: how do you get jQuery plugins and their CSS files to initialize on dynamically loaded content? What goes where (incl. the jQuery library itself)?
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您使用“window.open”类型的弹出窗口，那么我会说让它更简单一点，并将其作为 JQueryUI 对话框引入您的页面，该对话框会拉入外部 html 文件的内容，并将其加载到 DIV 中并且可以在通用页面上下文中访问，同时继承了 JQuery 和 CSS。其简单形式应如下所示：
其中 #id 是隐藏的 DIV，将包含对话框数据，URL 是弹出窗口中 html 文件的外部 url。
If you are using the "window.open" type of popup, then I would say make it a little simpler and bring it into your page as a JQueryUI Dialog box that pulls in your external html file are the content, loading it in the DIV and accessible within the general page context, inheriting the JQuery and CSS as well. The simple form of this should be like:
Where #id is the DIV that is hidden and will contain your dialog data, and URL is the external url to the html file in your popup.
找到了解决方案......
我的问题特别是关于将 colorbox （一个 jQuery 灯箱插件）与 jScrollPane （一个 jQuery 自定义滚动条插件）集成。我使用 colorbox 加载内容的 ajax 调用有效，但是，jScrollPane 无法启动，因为未加载所需的内容（因为 ajax 调用没有从
head标记中提取任何信息）。如果其他 Stack Overflowers 偶然发现类似的问题，我就是这样做的：使用 iframe 而不是 ajax 调用。哎呀。呃。
我不知道 colorbox 是否是唯一一个仅从
body标签而不是head提取信息的插件，但我想很多插件在处理外部文件时都是这样工作的。如果这是您的问题，请使用 iframe 来确保提取head标记中的数据。谢谢堆栈溢出！我依然爱你。
Found the solution....
My question was specifically on integrating colorbox (a jQuery lightbox plugin) with jScrollPane (a jQuery custom scrollbar plugin). My ajax call to load content with the colorbox worked, however, the jScrollPane could not initiate because the required wasn't loaded (because the ajax call didn't pull any info from the
headtags).If other Stack Overflowers stumble across a similar issue this is what I did to solve it: used iframes instead of an ajax call. Ooops. duh.
I don't know if colorbox is the only plugin that pulls info only from
bodytags and not theheadbut I imagine many plugins work this way when working with external files. If this is your problem, use iframes to ensure that the data in yourheadtag is pulled.Thanks Stack Overflow anyhoo! I still love you.