如何使用Ajax填充外部加载Div(jQuery)

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的超时执行。15ms不足以让Div加载，很可能是。

您可以尝试三件事（从更糟到更好的订购）：

1. 尝试将超时增加到更大的数字。从1000（1000ms -1秒）开始，看看它是否有效或您需要增加它。您更有可能将其降低

2. 尝试使用setInterval而不是setTimeout，这将重复自我。当然，一旦加载，您就需要清除间隔，以便停止。另外，更好地使用更大的超时/间隔，例如50或100ms b/c快速启动计时器可以大大减慢页面

，例如

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

3. 与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);