無法操作（）

Question

我在index.php文件

<div id="internal" class="internal-class"></div> 
<a href="external.php #external-element" class="button">Load</a> 

和CSS下面的HTML這樣

#internal { 
    padding: 50px; 
    background: green; 
    display: inline-block; 
} 
#external-element { 
    width: 50px; 
    height: 50px; 
    background: yellow; 
} 

通過AJAX負荷加載外部HTML DOM的元素和我有一個外部的PHP頁面external.php這樣

<div id="external-element" class="external-class"></div> 

我已經在index.php中

使用下面的腳本

$(document).ready(function() { 
    $('a').click(function(event){ 
     $attrib = $(this).attr('href'); 
     $('#internal').load($attrib,function(){ 
      alert($('#internal').attr('class')); 
      alert($('.external-element').attr('class')); 

     }); 
     event.preventDefault(); 
    }); 
}); 

在上面的代碼的jQuery腳本成功加載在div #internal的#external-element從external.php。加載後，我想提醒#internal以及#external-element的課程。

$('#internal').load($attrib,function(){ 

    alert($('#internal').attr('class')); 
    alert($('.external-element').attr('class')); 

}); 

上面的代碼中成功地提醒類的#internal & #external-element的名稱。 但是，當我寫

$('#internal').load($attrib); 
    alert($('#internal').attr('class')); 
    alert($('#external-element').attr('class')); 

然後上面的代碼沒有警報的類的#external-element。這是說undefined。

我想，在AJAX load()後無法操作external.php的DOM。

請幫幫我。 謝謝。

Answer 1

在您的代碼：

$('#internal').load($attrib,function(){ 
     alert($('#internal').attr('class')); 
     alert($('.external-element').attr('class')); 
}); 

它被成功地提醒，因爲當load完成時（即當元件被加載。）內load異步調用回調函數。

當你這樣做：

$('#internal').load($attrib); 
alert($('#internal').attr('class')); 
alert($('#external-element').attr('class')); 

的load呼叫警報被調用時未必完成。

Answer 2

這是因爲.load是異步的。當您在失敗的嘗試中運行alert時，內容仍然會被加載到#internal--因此，您需要使用回調函數，就像第一個示例一樣。