javascript - 无法处理由AJAX load()加载的外部HTML的DOM元素

我在index.php中关注了HTMl

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

像这样的CSS

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

而且我有一个这样的外部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 #external-element中的external.php加载了#internal。加载后，我想提醒#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。

请帮我。
谢谢。

最佳答案

在您的代码中：

$('#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调用不一定已完成。

关于javascript - 无法处理由AJAX load()加载的外部HTML的DOM元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24937693/