javascript - 如何使用 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()，但没有用。$(函数() {});也不行

Answer 1

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

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