jQuery選擇用於動態地生成的元素

Question

我有以下HTML摘錄：

console.log($('#contentX h1')); 

輸出是

[<h1>​MyHeading1​</h1>​] 

：

<div id="contentX"><h1>MyHeading1</h1></div> 

我可以用jQuery選擇具有以下syccessfully代碼段

但是，它確實不是工作時我動態從容裝載內容。例如，

HTML代碼片段：

<div id="content"></div> 

jQuery代碼片段：

$('#content').load('foo.html')); // the content is loaded correctly with <h1> tag 

jQuery代碼片斷並不工作：

console.log($('#content h1')); // it returns []. I was expecting to return something. 

我想知道，如果這是類似於事件綁定的行爲：.click（）vs .live （）。

在此先感謝您的幫助。

Answer 1

load函數是異步的，這意味着它開始加載，然後在後臺繼續執行，然後繼續執行腳本的其餘部分。它不等待load首先完成。

您可以將函數附加到load調用，以告訴jQuery在加載完成後執行此操作。
下面是一個例子：

$('#content').load('foo.html', function() {  
    console.log($('#content h1')); 
}); 

Answer 2

$('#content').load('foo.html', function() { 
    console.log($('#content h1')); 
}); 

Answer 3

負載的jQuery的簡寫AJAX方法之一，而同樣的動畫功能等，它不會等到它完成加載外部文件（foo.html ）以運行。嘗試把執行console.log（或任何你想在那裏）作爲回調：

(...).load([url], function() { 
    console.log("whatever"); 
} 

您也可以嘗試抓取網頁時使用回調捕獲錯誤：

(...).load([url], function(response, status, xhr) { 
    if (status == "error") { 
    alert("Well, that didn't really work, here's the reason why:" + xhr.statusText); 
    } 
} 

參考在jQuery的API .load頁面，以進一步挖掘：http://api.jquery.com/load/

希望這對你的作品