Question

我通过包含JS对象的ajax加载一个html页面。如何获取对新加载（子）页面内对象的引用？

父：

//parent.html

<script>

    function ParentObject() {
        this.children = new Array();
    }

    var aParentObject = new ParentObject();

    $.get('/url/to/child.html', function(data) {
        $("#child-div").html(data);
    });

</script>

子：

//child.html

<div>Some html element</div>

...

<script>
    function ChildObject() {
        this.someProperty = "I'm a Child";
    }

    var aChildObject = new ChildObject();
</script>

Answer 1

在声明新变量时应该使用var

var aChildObject = new ChildObject();

当您附加包含jscript的html时，脚本将执行，您将在该点之后获得引用。因此，您必须确保在插入后访问子变量。

$.get('/url/to/child.html', function(data) {
    $("#child-div").html(data);
    //Access your child here
    alert(aParentObject.someProperty);
});

Answer 2

您可能希望使用.load()代替.get()。使用.load()，您可以为“子”页面指定一个选择器，以撤回您要检索的特定部分。

假设child.html的div有id="child-div"：

//parent.html

<script>

    function ParentObject() {
        this.children = new Array();
    }

    aParentObject = new ParentObject();

    $("#child-div").load('/url/to/child.html #child-div');

</script>

请参阅此处的“加载页面片段”部分：http://api.jquery.com/load/

在ajax响应中获取对JS对象的引用

2 个答案: