Question

我的网络应用会使用jquery.ajax动态加载其部分UI。新的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 partial postback and jQuery problem 在看了你的问题之后。

Answer 2

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

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

Answer 3

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

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

其他所有内容都会很快变成kludgy - 我猜你可以实现你自己的“就绪”处理程序，这个处理程序在你的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。

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

4 个答案: