Question

我有一个主页面，其中包含2个通过.load（）加载外部文件的链接。第一个文件有一个简单的JavaScript翻转，在加载内容时有效。第二个文件有一个jQuery插件，当通过.load（）加载时不起作用 - 但是当数据文件本身被查看时工作正常。

主档案：http://gator1105.hostgator.com/~carc/test-load.html

第二个数据文件，它自己工作，但不是来自.load（）:(与上面相同的URL，但文件是test-load-two.html - StackOverflow将允许我只创建1个超链接）而不是在这里粘贴我的源代码，您只需从页面本身查看它。

如何在加载.load（）时使用幻灯片显示第二个文件？

Answer 1

我实际上做了类似于我正在研究的网站。您要做的是为主页上的$ .load（）调用的每个页面创建一个回调函数。

请参阅the jquery.load() documenation中的以下代码：

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

在您的特定情况下，您需要在test-load.html主页面上显示类似内容。

$(document).ready(
    function(){ 
    $('li').click(function(){ 
        var showThisContent = this.id;
        $('#content').load('test-load-'+showThisContent+'.html', function(){
              if (showThisContent == "one"){
                  //Do logic for test-load-one.html

                  //Pre-load your images here.

                  //You may have to assign a class to your anchor tag
                  //and do something like:
                  $('a.assignedClass').mouseover(function(){});
                  $('a.assignedClass').mouseout(function(){});
              } //end if
              if (showThisContent =="two"){
                  //Do logic for test-load-two.html here
                  $('.slideshow').cycle({
                      fx: 'fade',
                      speed: 500,
                      timeout: 0,
                      next: '.nextSSimg',
                      prev: '.prevSSimg',
                      pager: '#SSnav',
                      cleartype:  true,
                      cleartypeNoBg:  true
                  }); //end .cycle()
               } //end if
            ); //end .load(location, callback function())
    }); //end $('li).click()
}); //end $(document).ready()

现在，显然我没有转换你的所有代码，但是这里发生的事情是，一旦document.ready完成，回调函数就会运行，并且因为像'.slideshow'这样的元素现在被加载到DOM中，你的回调代码会适当地绑定它们。

您可以通过多种方式切换此代码以获得相同的结果（即，将2 $ .load（）s包装到条件中而不是在.load回调中执行条件逻辑，和/或放置callbackOne（）和document.ready之上的callbackTwo（）函数然后适当地调用它们，但这是你的偏好。您应该可以使用$ .load（）的回调函数参数执行您想要的操作。

Answer 2

忽略此答案

您的第二个文件在“document.ready”块中进行初始化。当您的内容通过AJAX加载时，不会运行。尝试使用“document.ready”中的第二页中的代码，这样它就只是一个简单的脚本块。

[edit]哦，我明白了 - 不仅是“document.ready”块中的脚本（好吧，它不再是），但第二页是一个完整的HTML文档。您无法将完整的HTML文档真正加载到另一个文档的中间;它没有意义，jQuery只会抓住身体里的东西。因此，尝试将脚本标记移动到正文中，看看会发生什么。（你仍然不想要“document.ready”，我不认为。）

[再次编辑]实际上我把它拿回来了 - 我不认为jQuery剥离了任何东西;我只是打赌浏览器会感到困惑。

[再次编辑]好的，好的，我看到你再次改变它 - 让我仔细看看。

Answer 3

那是因为.load只是加载并将HTML设置为你说的元素，而脚本标签在所有这些之外

Answer 4

好的，这是一个更好的答案：由于我不明白的原因，当你使用特殊的“选择器”技巧加载一个片段（或整个页面;无论如何）时，使用特殊的“选择器”技巧来获取文档的一部分：< / p>

var showThisContent = this.id;
$('#content').load('test-load-' + showThisContent + '.html #content-area');

jQuery库从内容中完全删除脚本，并且不会运行它们。为什么？我不知道。

我知道你可能不再相信我了，但这就是我对你的源代码所做的事情：我拿了第二个文件（test-load-two）并剥离了头部和东西;基本上我把它变成了一个只包含“内容区域”的片段。（我也摆脱了加载jquery的脚本标记，因为你真的不需要它，因为外页已经有了它。）然后我改变了主页面（test-load），这样当它调用“load”时只需传入的网址，而不是那个'#content-area'选择器。这很有效。

[edit]我刚刚向jQuery论坛发帖提问：http://forum.jquery.com/topic/the-load-function-and-script-blocks

Answer 5

不要去$.load。请尝试使用$.get，这可能看起来不那么舒服，但在不同情况下它对我有用。示例代码如下。

$(li).click(function() {
   // your code for finding the id
   $.get('test-load-' + id + '.html', function(responseHtml){
       $('div#content-area').empty().append($(responseHtml)); // remove all elements from #content-area
       // $('...').html(responseHtml) will not work
   });
});

我希望这能解决你的问题。

jQuery .load（）不加载插件

5 个答案: