带有包含 JS 的远程 HTML 的 jQuery AJAX

Question

我有一个使用 jQuery + AJAX 将内容加载到手风琴框架的页面设置。它可以很好地加载直接文本/HTML，但我现在需要加载 Javascript 和 HTML。

为了详细说明，我正在使用 GalleryView 在手风琴的照片库部分显示图像。然而，当我加载 HTML 文件时，脚本并没有被执行，我只是看到了直接的图像。没有画廊。

有没有一种更简洁的方法来 .load()'ing HTML 文件然后 eval()'ing 它？我尝试在 load() 函数回调中将 GalleryView 代码（使用手风琴）放入主页面，希望它可以初始化 GalleryView 插件，但不行。

Answer 1

您可以使用 LiveQuery 插件。在加载其他内容的原始文件或“主”文件中，将代码绑定到正在加载的元素。插件将检测内容何时加载并执行代码。

jQuery:

$(document).ready(function(){
    $('#gallery').livequery(function(){
        $(this).galleryView();
    });
});

插件可用：http://plugins.jquery.com/project/livequery/

Answer 2

我的新答案...

无需实时查询。您的浏览器出现了延迟，因为由于某种原因，galleryView 插件和 livequery 导致了无限循环。可能只是那里的一些不兼容（一旦我意识到它会导致无限循环，我并没有深入研究）。

使用这个：

$(document).ready(function(){

    $('#content').load('theOtherFile.html', function(){

        $(this).find('#gallery').galleryView(); 

    });

});

这利用了 .load() 函数允许您实现的回调方法。当ajax调用完成，内容加载完毕后，会调用回调函数。然后，您可以搜索“this”，即#content div，查找您现在加载的#gallery UL。我还注意到你有两个 $(document).ready(function(){});用途。你真的应该只使用其中之一。

Answer 3

Load 将自动过滤掉文档中除正文标签之外的所有内容。如果您的 javascript 在文档的头部，它将不会与文档一起加载。尝试将您的 javascript 移动到 body 标记中，看看是否可行。

在 jQuery 1.2 中，您现在可以指定一个 URL 中的 jQuery 选择器。这样做 将过滤传入的 HTML 文档，只注入元素 匹配选择器。语法 看起来像“url #some > 选择器”。默认选择器“body>*” 始终适用。如果 URL 包含一个 空间它应该是escape()d。见 更多信息的示例。

根据 cmets 更新

您需要在基本页面中加载 CSS。由于链接标签必须在头元素中，因此没有任何（简单的）方法可以通过 AJAX 加载它。您可以将链接添加到文档的头部，但获取链接的 href 可能需要单独调用或更改以返回链接和包装为 json 对象的 html。最好只在主文档中包含 CSS。

我认为，如果您从 AJAX 调用中仅返回以下内容，它应该可以工作。

<ul id="gallery">
   <li><span class="panel-overlay">This is an overlay</span><img src="img1.jpg" alt="test1" title="test1" /></li>
   <li><span class="panel-overlay">This is an overlay</span><img src="img2.jpg" alt="test2" title="test2" /></li>
   <li><span class="panel-overlay">This is an overlay</span><img src="img3.jpg" alt="test3" title="test3" /></li>
   <li><span class="panel-overlay">This is an overlay</span><img src="img4.jpg" alt="test4" title="test4" /></li>
</ul>

<script type="text/javascript">
$(function() {
    $('#gallery').galleryView(
    {
        panel_width: 474,
        panel_height: 353,
        frame_width: 50,
        frame_height: 50,
        transition_speed: 350,
        easing: 'easeInOutQuad',
        transition_interval: 0
    });
});
</script>