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

unable to manipulate DOM elements of external HTML loaded by AJAX load()

本文关键字：加载 外部 HTML 元素 DOM 操作 AJAX load      更新时间：2023-09-26

我有以下HTMl在index.php

<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页面外部。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脚本成功地从external.php中加载了div #internal中的#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类。它说的是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调用不一定已经完成。

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

相关文章：