试图使 $(document).ready 与 load() 一起工作答案

【问题标题】：Trying to make $(document).ready work with load()试图使 $(document).ready 与 load() 一起工作
【发布时间】：2012-06-14 17:44:02
【问题描述】：

我正在使用加载功能加载我的页面。该页面包含轨道滑块的初始化代码（我使用基础）。图像加载但滑块未初始化。

加载slider.html的代码

$("a#1").click( function () {
    $("#center_content").load("pages/slider.html");
});

slider.html 中的代码

<div class="row">
    <div class="four columns">Welcome</div>
    <div class="eight columns" id="featured">
        <img src="images/slides/1.jpg" alt="Overflow: Hidden No More" />
        <img src="images/slides/2.jpg"  alt="HTML Captions" />
        <img src="images/slides/3.jpg" alt="and more features" />
        <img src="images/slides/1.jpg" alt="Overflow: Hidden No More" />
        <img src="images/slides/2.jpg"  alt="HTML Captions" />
        <img src="images/slides/3.jpg" alt="and more features" />
    </div>
</div>
<script type="text/javascript">
     $(document).ready(function() {
         $('#featured').orbit();
     });
</script>

【问题讨论】：

标签： jquery ajax document-ready

【解决方案1】：

我想这会有所帮助。在load完成后绑定轨道函数，并在slider.html页面中移除绑定。

$(function(){
    $("a#1").click( function () {
        $("#center_content").load("pages/slider.html",function(){
             $('#featured').orbit();
        });
    });
});

【讨论】：

还是不行。这是我在 firebug 控制台中发现的错误 $("#featured").orbit is not a function
有没有参考主页面有轨道功能的脚本？
@Dez 确保您在主页（不是滑块页面）中引用了 jQuery 和其他具有轨道功能的脚本。我的答案中的脚本应该在主页中。
@Dez 试试这个：$("#center_content").load("pages/slider.html .row, script");
仍然收到同样的错误：$("#featured").orbit 不是函数。还有一件事是页面实际上是从 load() 加载的页面加载的，这有关系吗？

【解决方案2】：

取自documentation：

脚本执行

使用不带后缀的 URL 调用 .load() 时选择器表达式，内容在脚本之前传递给 .html() 被移除。这会在它们之前执行脚本块丢弃。如果调用 .load() 并附加一个选择器表达式 URL，然而，脚本在 DOM 被删除之前被剥离更新，因此不会被执行。

如果您需要在 html 中包含代码，我认为您不需要使用 $.ready()，因为脚本标记位于您尝试绑定的 html 之后。没有它它应该执行得很好。我猜您的代码不起作用，因为当 load() 函数解释脚本时，尚未插入 html。后来插入html的时候就没有代码可以执行了

【讨论】：