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

Question

我在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 #internal 中的 external.php 加载 #external-element。加载后，我想提醒 #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的类。它说未定义。

我认为，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 调用不一定已完成。