在加载了jquery.ajax()的页面中运行的脚本运行document.ready为时过早 [英] Scripts running in jquery.ajax() loaded pages run document.ready too early

问题描述

我的网站正在使用jquery.load()在页面的很大一部分上进行导航.我真的很欣赏仅包含加载内容的特定部分的功能，这里的id为"="content"的div:

My site was using jquery.load() to do navigation on a big chunk of the page. I really appreciate the ability to only include only a particular part of the loaded content, here the div with id="content":

$(frame_selector).load(url +" #content", function(response, status, xhr) {...});

但是现在我需要能够运行脚本，这些脚本是动态加载的页面的一部分. Jquery.load()去除了这些脚本，但jquery.ajax()却没有.因此，我像这样在ajax调用中复制了jquery.load的部分内容功能:

But now I need to be able to run scripts that are part of the pages being loaded dynamically. Jquery.load() strips out these scripts, but jquery.ajax() doesn't. So I duplicated the partial-content functionality of jquery.load in an ajax call as such:

$.ajax({
  url: url,
  dataType: 'html', 
  success: function(data, textStatus, XMLHttpRequest) {
      // Only include the response within the #content id element.
      $(frame_selector).html( jQuery("<div>")
            .append(data)
            .find("#content")
      );
  }
});

问题是从ajax调用动态加载的脚本无法可靠运行.有时它们似乎没有任何作用，也许是因为它们运行得太早了.这些脚本只是在jquery中进行DOM操作-不依赖于图像或Flash或尚不应该加载的任何内容.为了避免卡住，我使用了这种骇人听闻的技巧来使工作正常进行.代替使用以下命令加载AJAX脚本:

The problem is that the scripts which are being dynamically loaded from the ajax call aren't running reliably. Sometimes they don't seem to have any effect, perhaps because they're running too early. The scripts are just doing DOM manipulation in jquery -- not relying on images or flash or anything that's not supposed to be loaded yet. To keep from getting stuck I have this hideous hack to get things working. Instead of the AJAX-loaded script just using:

$(document).ready( function() {...} );  // unreliable

我将脚本延迟200毫秒才能运行:

I delay the script 200ms before running:

$(document).ready( window.setTimeout( function() {...}, 200 )); // HATE THIS

有人知道我如何可靠地完成这项工作而又不对延迟进行硬编码?我猜想这是<script>和将#content加载到新div中的逻辑之间的竞争条件，但是我不确定该怎么做.

Anybody know how I can make this work reliably without hard-coding a delay? I'm guessing it's a race condition between the <script> and my logic to load #content into a new div, but I'm not sure what to do about it.

推荐答案

我假设脚本正在对您通过AJAX添加的DOM元素进行操作.

I assume the scripts are doing manipulation upon the DOM elements you're adding through AJAX.

jQuery具有一个isReady属性，该属性会在页面上触发ready事件后进行设置.

jQuery has an isReady property that it sets once the ready event has been triggered on the page.

任何随后对jQuery.ready(...)的调用都将首先检查此isReady标志.如果该标志设置为true，它将立即调用处理程序.您可以看到为什么这会在您的代码中引起问题.

Any subsequent calls to jQuery.ready(...) will first check this isReady flag. If the flag is set to true, it will call the handler immediately. You can see why this would cause problems in your code.

一种选择是将响应加载到jQuery片段中，并解析出所有<script />标签以供以后执行.

One option would be to load the response into a jQuery fragment and parse out all of the <script /> tags for execution later.

var ajaxResponse = $(html);
var scripts = ajaxResponse.find('script');

// Move your scripts into a new element
var tempScripts = $().append(scripts);

// Append your content, followed by your script tags
$(document).append(ajaxResponse);
$(document).append(tempScripts);

这篇关于在加载了jquery.ajax()的页面中运行的脚本运行document.ready为时过早的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！