jQuery鏈接.load（）請求？

所以我用jQuery的.load()只是現在的工作，它看起來就像我們不能配置$("#example").load('./uri.ext #ID')以連鎖爲這樣：jQuery鏈接.load（）請求？

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

如果我們有資料覈實的模板文件，這當然是有用的或有些東西要動態構建頁面，而不是將HTML存儲在字符串變量或其他行中......此外，我們可以將其中的幾個保存在一個文件中。

理想我想窩事到如今與命令：

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

我得到的問題是雙重的。首先，請求的async : true屬性會導致下一個請求觸發並且該放置不會按預期進行預製。 ajaxCompletes（function（）{/ next .load（）in order /}）`which which ended（'＃example'）在一個沒有結束的遞歸陷阱中，並不斷髮送這些文件的請求。

有關如何使用像我嘗試過的語法/方法來完成我的任何想法？另外，如果這不是問題，並且只是我對jQuery鏈接的誤解，那麼我將非常感謝解釋。

來源

2010-09-17 Incognito

我不是很確定你想用這個來完成什麼。如果你只是嵌套一堆空白的div，你可能只需要傳入一個包含ajax的數組並且做一些.append（）調用 – dave 2010-09-17 14:27:54

@dave div是嵌套的例子，我不想嵌套一堆空的div的。 divs可以是一個表格，或者包含一個輸入表單或文本段落...在概念上，我將有一個template.html文件，我要求這些元素，而不是'var str ='

Lorem Ipsum

' ' – Incognito 2010-09-17 14:33:35

您需要嵌套他們在回調函數來實現這一目標：

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

編輯爲ES6標準：

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

來源

2010-09-17 14:24:01 dave

對其他行爲發生的原因有何洞見？ – Incognito 2010-09-17 14:34:32

您之前設置的方式，您所有的調用都綁定到$（「＃example」）對象。這是如何鏈接jQuery的作品，目標始終是相同的;我們沒有更新以繼承您從前一次收到的任何結果。 – dave 2010-09-17 15:00:41

難道不可以使用.ready（）？ – 2016-08-04 12:55:31

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(); 
});

來源

2017-03-22 14:42:17

jQuery鏈接.load（）請求？

回答

相關問題