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

时间:2014-07-24 15:17:05

标签: javascript jquery html ajax asynchronous

我在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&amp;类的名称。 #external-element。 但是当我写作

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

然后上面的代码没有提醒#external-element的类。它是在说undefined

我认为,在AJAX load()之后无法操纵external.php的DOM。

请帮帮我。 感谢。

2 个答案:

答案 0 :(得分:2)

这是因为.load是异步的。当您在失败的尝试中运行alert时,内容仍然被加载到#internal中 - 因此您需要像第一个示例一样使用回调函数。

答案 1 :(得分:2)

在您的代码中:

$('#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调用未必完成。