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

时间:2014-07-24 12:57:09

标签: 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 #internal中的external.php加载#external-element。加载后我想提醒#internal和#external-element的类。

$('#internal').load($attrib,function(){

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

});

以上代码成功提醒#internal&amp;类的名称#外部元件。 但是当我写作

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

然后上面的代码没有警告#external-element的类。这是说未定义。

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

1 个答案:

答案 0 :(得分:1)

external-element不是一个班级。这是一个id。

'#'放在它之前而不是'.'

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