Question

我正在为页面创建测试，并且必须使用jQuery来更改页面控件版本上的元素以用于每种不同的体验。

我使用jquery从外部页面加载元素并替换div。但是，在外部页面上，它使用对api的ajax调用来填充div，所以我使用ajax调用复制了该函数。

我认为它正在尝试在新div实际加载到页面之前进行ajax调用。

我已经尝试移动该函数，将加载函数包装在ajax调用中，但它仍然无效。

我可能会遗漏一些明显的东西，但这是我代码的一部分：

$('.replace-div').load('external.html #replace-div');

function waitForLoad() {
    if ($('#replace-div')) {  
        var object;
        $.ajax({
          url: "https://api.com",
          async: false,
          success: function(result) {
            object = result;
            var variable1 = object["blah"][0].value,
            var variable2 = object["blah"][0].value,
            var variable3 = object["blah"][0].value,
            var variable4 = object["blah"][0].value,

            $('newElement').attr('href', variable1);
            $('newElement2').attr('src', variable2);
            $('newElement3').attr('href', variable3);
            $('newElement4').text("text" + variable4 + "more text");
          }
        }); 
    } else {
      setTimeout(waitForLoad, 15);
    }
}

waitForLoad();

我在控制台中没有收到任何错误，当我将上面的waitForLoad函数粘贴到控制台时，它会完全填满。显然这是在页面加载新div之后，所以我只需要知道如何让ajax调用等待加载。

我已经尝试过.ajaxComplete（），但它没有帮助。 $（function（）{}）;也行不通

Answer 1

.load()有一个回调参数，你可以提供一个在加载数据后运行的函数。

$('replace-div').load('external.html #replace-div', function() {
    $.ajax(...);
});

Answer 2

所以，会发生的事情是，第一次调用waitForLoad时，它看不到加载的div，代码转到else块并以15ms超时再次执行。对于div来说，15ms是不够的，很有可能。

你可以尝试三件事（从更差到更好的顺序）：

尝试将超时增加到更大的数字。从1000（1000毫秒 - 1秒）开始，查看它是否有效或您需要增加它。你不得不减少它
尝试使用setInterval代替setTimeout，这将重演。当然，一旦加载，你需要清除间隔，以便停止。此外，更好地使用更大的超时/间隔，例如50或100毫秒b / c，快速点火计时器可以减慢很多页面

E.g。

$('.replace-div').load('external.html #replace-div');

function waitForLoad() {
    if ($('#replace-div')) {  
        clearInterval(window.waiter);
        ...
    } else {
      window.timer = setInterval(waitForLoad, 50);
    }
}

waitForLoad();

与2相同，但在load调用后使用更多惯用回调函数。

 // the window.waiter is the interval handle, and it will run every 100ms. It calls .load every time, and if the #replace-div is found, unsets the interval handle.

 window.waiter = setInterval(function() {
      $(".replace-div").load("external.html #replace-div", function() {
        if ($(".replace-div #replace-div").length) {
          // found the DIV
          // code...
          clearInterval(window.waiter); // bye interval handle, thanks
        }
      });
    }, 100);

如何使用Ajax填充外部加载的div（jQuery）

2 个答案: