无法操作（）

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--因此，您需要使用回调函数，就像第一个示例一样。