Question

一旦DOM完全加载，

$(document).ready(handler)就会执行。如果稍后使用包含$(document).ready(handler)函数的AJAX将内容添加到页面中，则会根据jQuery API立即执行此函数。此外，.ready只能在与当前文档匹配的jQuery对象上调用。

这不是我想要的，但是：）

如何在.ready已经触发后以符合跨浏览器的方式通过AJAX加载的数据实现此.ready类型的功能？

修改这是一个非常简单的例子。我确实遇到了一个我正在努力解决的问题，但是我对理解这种方法的方式更感兴趣。

基本上，ajaxPage.html中的.ready函数在importantDependency.js完全加载之前触发，因此缺少第一次加载ajaxPage，importantDependency，但后续加载会看到它。

的index.html

...
<script type="text/javascript">
  $(document).ready(function() {
    alert("The document is ready");

    $('#myButton').click(function() {
      $('<div></div>').dialog({
        open: function () {
          $(this).load('ajaxPage.html');
        }
      });
    });
  });
</script>
...

ajaxPage.html

...
<script type="text/javascript" src="importantDependency.js"></script>
<script type="text/javascript">
  $(document).ready() {
    $('#thing').leverageImportantDependency();
  });
</script>
...

编辑2： 我想这样做 FROM 加载的内容，而不是来自调用内容的页面。修改调用页面意味着在调用它的每个实例中复制代码。我希望将行为附加到内容，而不是调用它的页面。

Answer 1

一般来说，你会想要做这样的事情：

$("#container").load(function(html) {
    // container has been filled up, and is 
    // ready for JS processing
    doSomethingWithNewContent();
});

也就是说，通过利用适当的ajax回调，一旦内容被替换，就触发。其他例子包括：

$.get("foo.html", function(html) { $("#container").html(html); $("#container").find(".foo").fancyThing(); }); $.ajax({ url: 'foo.html', type: 'post', success: function(html) { $("#container").html(html).find(".foo").hide(); } });

请参阅：

http://api.jquery.com/jQuery.ajax/

http://api.jquery.com/jQuery.post/

http://api.jquery.com/jQuery.get/

http://api.jquery.com/jQuery.load/

编辑：根据我的编辑理解，你想要附加一些东西，比如一个事件处理程序或插件，一些元素不断被替换。有几种方法可以做到这一点：

在成功回调中，如上面演示了。

使用.live或 .delegate。

使用.liveQuery。

Answer 2

我不确定我是否收到您的问题，但是当您检索到数据时，您只需在ajax调用的成功处理程序中随意执行任何操作：

   $.ajax({
        url: pageUrl,
        success: function (data) {
            $(".someContainer").html(data);
            // TODO: This is your ready handler for the new content

        }
    });

Answer 3

您可以使用JQuery Ajax调用的完整属性。成功或错误后调用complete函数。

$.ajax({
  url: "foo",
  complete: function({
    // I'm done
  }
});

请参阅：http://api.jquery.com/jQuery.ajax/

如何实现AJAX内容的$（document）.ready类型行为？

3 个答案: