Question

我通过ajax调用传递动态生成的html，请参阅下面的简单示例

var loadContent = function(){

    $.ajax({
         url: '/url',
         method: 'GET'
    }).success(function (html) { 

         $('.content-wrapper').replaceWith(html);

    }) 

    //this is how simple returned html looks like
    //<div class="content-wrapper"><ul"><li>test</li></ul></div>

};

现在，如果我尝试将li设为目标，那么添加课程就不会发生任何事情

var testAjaxGeneratedHtml = function() {
    loadContent();
    $('.content-wrapper ul li').addClass('test');
}

Answer 1

Ajax是异步请求，它不会等待响应，因此在ajax完全执行其任务后在success函数内添加类

var loadContent = function(){

    $.ajax({
         url: '/url',
         method: 'GET'
    }).success(function (html) { 

         $('.content-wrapper').replaceWith(html);
         $('.content-wrapper ul li').addClass('test');


    }) 

    //this is how simple returned html looks like
    //<div class="content-wrapper"><ul"><li>test</li></ul></div>

};

Answer 2

Nitin的回答是正确的，但我觉得我可以补充一点解释......

大多数Javascript函数都是同步的 - 每个步骤都必须在下一个函数开始之前完成。 Ajax是不同的，因为它包含请求和响应。它发送请求并建立一个监听器来等待响应并在它到来时对其进行处理。创建此侦听器后，您的代码可以在响应仍未处理时继续运行。

因此，在您的情况下，您正在发送请求，然后在响应返回之前操作DOM。大概在一秒钟之后，响应到来，你的“成功”功能处理它，并用$('.content-wrapper ul li').addClass('test');覆盖你暂时实现的目标

可能最好的解决方案是按照Nitin的建议进行操作并将该行放在success处理程序中，但如果由于某种原因必须在testAjaxGeneratedHtml内执行，则可以将其定义为函数：

注意：未经测试的代码

var loadContent = function(onSuccess){

    $.ajax({
         url: '/url',
         method: 'GET'
    }).success(function (html) { 

         $('.content-wrapper').replaceWith(html);
         onSuccess();

    }) 

    //this is how simple returned html looks like
    //<div class="content-wrapper"><ul"><li>test</li></ul></div>

};

var testAjaxGeneratedHtml = function() {
    loadContent(function() { $('.content-wrapper ul li').addClass('test'); });
}

通过ajax调用动态添加内容不能用jquery进行定位

2 个答案: