在ajax加载的页面片段中运行脚本

Question

我的web应用程序动态加载其用户界面部分jquery.ajax。新的UI部分虽然带有脚本。我加载它们的方式：

使用...

$.ajax({ 
    url: url, 
    dataType: 'html', 
    success: function(data, textStatus, XMLHttpRequest) { 
     $(target_selector).html(data); 
     update_ui_after_load(); 
    } 
}); 

这几乎工程。问题是包含在页面动态部分中的脚本在将新页面片段插入到DOM之前运行。但通常这些脚本想要修改它们随附的HTML。我最好的解决方案哈克到目前为止，仅仅是延迟脚本的时候一些合理的量，让DOM插入发生，通过在setTimeout包裹他们：

window.setTimeout(function() { 
    // process downloaded Fragment 
}, 300); 

显然，这是不可靠的，可怕的。什么是更好的方法？

Answer 1

我解决它通过使一个新的简单准备处理系统如下...

var ajaxOnLoad = (function() { 
    var ajaxOnLoad = {}; 
    var onLoadQueue=[]; 

    ajaxOnLoad.onLoad= function(fn) { 
     onLoadQueue.push(fn); 
    }   

    ajaxOnLoad.fireOnLoad = function() { 
     while(onLoadQueue.length > 0) { 
      var fn = onLoadQueue.shift(); 
      fn(); 
     } 
    } 

    window.ajaxOnLoad = ajaxOnLoad; 
    return ajaxOnLoad; 
})(); 

中得到 .ajax()加载页面

所以，脚本排队等待与运行

ajaxOnLoad.onLoad(function() { 
    // Stuff to do after the page fragment is inserted in the main DOM 
}); 

并且其中不插入时，update_ui_after_load()呼叫之前的代码中，运行

ajaxOnLoad.fireOnLoad(); 

更完整的解决方案可以解析页面，查找脚本标记并自动排队。但是由于我完全控制了插入的碎片，因此我更容易切换到使用ajaxOnLoad.onLoad。

Answer 2

你是否熟悉live（）函数？可能是你在这里寻找的。

http://api.jquery.com/live/

Answer 3

的问题是，包含在页面运行的动态部分脚本的新页面片段插入到DOM之前。但通常这些脚本想要修改它们随附的HTML。

我确信在这种情况下，唯一明智的做法是将脚本放在HTML元素之后。

其他一切很快就会变得缺憾 - 我猜你可能实现您的HTML已经被插入之后被执行自己的“准备就绪”的处理程序，但是这将是一个大量的工作来实现没有真正的收获。

Answer 4

使用

$（function）;

将使您传递给jQuery的函数在片段在页面上内联后运行。 我发现它在 ASP.NET Ajax partial postback and jQuery problem 看完你的问题后。