Question

我正在按照此处的代码将外部内容加载到我的文档中。我在加载内容中操作对象的css时遇到了麻烦。在这里的示例中，#subContainer最终为蓝色，而不是红色。我认为这将与加载和执行代码之间的时序有关，这就是为什么我使用jQ .on()但仍然没有结果......

<!DOCTYPE html>

<html lang="en">
<head>

    <style>
    #subContainer {
        width:600px;
        height:400px;
        background:blue;
    }   
    </style>

    <script src="support/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script>

    $(document).ready( function() {

        var $cntnr = $('#container');
        var $subCntnr = $('#subContainer');

        $(window).on('load', function() {

            var testFunct = function() {
                console.log($subCntnr)
                $subCntnr.css({ background: 'red' });
            }

            testFunct();

        });

        $cntnr.load('parentDoc.html', function() {
            $('#subContainer').load('contents.html');
        });

    });

    </script>

</head>
<body>

    <div id="container"></div>

</body>
</html>

Answer 1

加载文档时，没有subContainer元素，因此变量$subCntnr引用空集。

$(document).ready(function () {
    var $cntnr = $('#container');

    $cntnr.load('parentDoc.html', function () {
        $('#subContainer').load('contents.html');

        var $subCntnr = $('#subContainer');
        console.log($subCntnr)
        $subCntnr.css({
            background: 'red'
        });
    });
});

使用load()将内容加载到元素时，AFAIK也没有触发load事件。因此，您需要将dom操作代码添加到加载完成回调。

更新

$(document).ready(function () {
    var $cntnr = $('#container');

    function dosomething() {
        var $subCntnr = $('#subContainer');
        console.log($subCntnr)
        $subCntnr.css({
            background: 'red'
        });
    }

    $cntnr.load('parentDoc.html', function () {
        $('#subContainer').load('contents.html');
        dosomething()
    });
});

操纵加载内容中的对象

1 个答案: