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

Question

我的Web应用程序使用jquery.ajax动态加载其UI jquery.ajax 。 新的UI部分附带了脚本。 我正在这样加载它们：

采用...

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

这几乎可行。 问题在于，页面的动态部分中包含的脚本会在新页面片段插入DOM之前运行。 但是通常这些脚本想要修改与它们一起交付的HTML。 到目前为止，我最好的hacky解决方案是将脚本包装在setTimeout ，以延迟脚本合理的时间以使DOM插入发生：

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

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

Answer 1

使用

$（功能）;

该片段在页面上内联后，将使传递给jQuery的函数运行。 在查看您的问题后，我在ASP.NET Ajax部分回发和jQuery问题中找到了它。

Answer 2

您熟悉live（）函数吗？ 可能是您在这里寻找的东西。

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

Answer 3

问题在于，页面的动态部分中包含的脚本会在新页面片段插入DOM之前运行。 但是通常这些脚本想要修改与它们一起交付的HTML。

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

其他所有事情都会很快变得混乱起来-我猜您可以实现自己的“就绪”处理程序，该处理程序在插入HTML之后执行，但是要实现很多工作却无济于事。

Answer 4

我通过制作一个新的简单的就绪处理程序系统解决了它，如下所示...

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更加容易。