jQuery chaining .load() запросы?

Question

Так что я работал с JQuery-х .load() только сейчас и, похоже, мы не можем настроить $("#example").load('./uri.ext #ID') к цепи, как, например:

$("#example").load('./uri.ext #ID1').load('./uri.ext #ID2').load('./uri.ext #ID3')

Что, конечно, было бы полезно, если бы мы имели шаблон файла DIVs или что-то, чтобы динамически строить страницу, а не хранить HTML в строковой переменной или что-то в этом роде ... плюс, мы могли бы сохранить несколько из них в одном файле.

В идеале я хотел бы гнездовые вещи как таковые с этой командой:

<div id="example"> 
    <div id="ID1"> 
     <div id="ID2"> 
      <div id="ID3"> 
      </div> 
     </div> 
    </div> 
</div> 

Проблемы я получаю в два раза. Во-первых, свойство async : true запроса вызывает следующий запрос на пожар, и размещение не преформно, как предполагалось. Затем я попытался запустить вложенный $ ("# example"). Load ('./ uri.ext # ID1'). AjaxCompletes (function() {/ next .load() в последовательности /}) `, которая закончилась в рекурсивной ловушке, которая не заканчивалась и продолжала отправлять запросы для этих файлов.

Любые мысли о том, как выполнить то, что мне нужно, с помощью синтаксиса/метода, как я пытался? Кроме того, если это не проблема и просто недоразумение с моей стороны цепочки jQuery, объяснение я был бы очень благодарен за любое объяснение этому.

Answer 1

Вы должны были бы вкладывать их в функции обратного вызова для достижения этой цели:

$('#example').load('./uri.ext #ID1', function() { 
    $('#ID1').load('./uri.ext #ID2', function() { 
    $('#ID2').load('./uri.ext #ID3', function() { 
     // load successful 
    }); 
    }); 
}); 

EDIT для ES6 стандартов:

$('#example').load('./uri.ext #ID1',() => { 
     $('#ID1').load('./uri.ext #ID2',() => { 
     $('#ID2').load('./uri.ext #ID3',() => { 
      // load successful 
     }); 
     }); 
    }); 

Answer 2

Upvoted вопрос и ответ.

Я предоставляю немного более элегантное решение, используя рекурсивный вызов, если другие хотят его построить. Обратите внимание, что это напрямую не отвечает контексту исходного вопроса. Это в контексте моего собственного решения, но идея такая же.

var App = App || {}; 

App.Quiz = (function ($) { 
    "use strict"; 

    var _templates = [{ target: "#quiz_main_template", url: "/UserControls/Quiz/Quiz_Main.tmpl.htm" }, 
     { target: "#quiz_media_left_template", url: "/UserControls/Quiz/Quiz_Media_Left.tmpl.htm" }, 
     { target: "#quiz_media_right_template", url: "/UserControls/Quiz/Quiz_Media_Right.tmpl.htm" }, 
     { target: "#quiz_no_media_template", url: "/UserControls/Quiz/Quiz_No_Media.tmpl.htm" }] 

    function loadTemplates(templates, callback) { 
     if (templates.length) { 
      var nextTemplate = templates.pop(); 
      $(nextTemplate.target).load(nextTemplate.url, loadTemplates(templates, callback)); 
     } else { 
      callback.call(); 
     } 
    } 

    function init() { 
     loadTemplates(_templates, function() { alert("Done!");}) 
    } 

    return { 
     init: init 
    }; 
})(jQuery); 

$(function() { 
    App.Quiz.init(); 
});