Question

的test.html

<body>
    <div id="parent" onclick="testFn('parent')">This is a basic test</div>
    <script>
        function testFn(id) {
            $('#' + id).load("appended.html");
            console.log(document.getElementById(id));
            console.log(document.getElementById("appendedDiv"));
        }
    </script>
</body>

appended.html

<div id="appendedDiv">appended!</div>

第一个console.log正确返回＆＃34; parent＆＃34;我可以在输出中看到父元素正确附加了＆＃34; attachedDiv＆＃34;，但第二个console.log返回null。为什么无法找到＆＃34; addedDiv＆＃34;即使我可以看到它已被明确附加？（这是我的问题的简化版本，我必须附加外部html文件）

Answer 1

您需要使用load回调。它将在load完成后运行。

function testFn(id) {
    $('#' + id).load("appended.html", function() {
        // Loaded Completely
        console.log($('#appendedDiv'));
    });
}

文档：http://api.jquery.com/load/

请求完成时执行的回调函数。

Answer 2

由于$.fn.load是异步的，因此您需要使用其回调方法。在请求完成时执行回调函数的地方。

$('#' + id).load("appended.html",function (){
    console.log(document.getElementById("appendedDiv"));
});

Answer 3

试试这个..

var myvar = $.load("appended.html");
$("#".id).append(myvar.html());
var mychild = $("#appendedDiv").html();
console.log(mychild);

从外部文件访问jquery附加元素

3 个答案: