如何在jQuery .load()之后更新DOM？

Question

如何在jQuery .load()之后更新DOM？

Nem*_*XXX 3 html javascript jquery dom load

我想从模板文件(b.xhtml)加载html内容,将其插入调用文件(a.xhtml),然后更新插入的节点(例如添加/删除属性等).

插入部分工作正常,但DOM似乎没有更新.

这是测试用例.

a.xhtml(调用html文件)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#placeholder").load("b.xhtml #id2");
                // why doesn't this work?
                var myTemp = document.querySelector("#id2");
                if (myTemp) {
                    alert(myTemp.innerHTML);
                } else {
                    alert("#id2 is undefined");
                };
            });
        });
    </script>
</head>
<body>
    <h1>jQuery load test</h1>
    <div><button>Load template</button></div>
    <div id="placeholder"></div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

b.xhtml(模板html文件)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
    <div id="templates">
        <p id="id1">This is template one</p>
        <p id="id2">This is template two</p>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

如何在.load()之后更新DOM ？
是否有更简单的方法从外部HTML文件插入HTML节点,该文件将自动更新DOM？
或者,如何在插入a.xhtml之前(或之后)更改或添加b.xhtml节点的属性？例如,如何在#id2节点中添加alt ="模板文本"属性？

Answer 1

Cru*_*ser 8

.load()方法是异步的,因此您的脚本正在执行该行,但在进入下一行之前不等待它完成.你可以做几件事.首先,使用回调函数:

$("#placeholder").load("b.xhtml #id2", function(){
            var myTemp = document.querySelector("#id2");
            if (myTemp) {
                alert(myTemp.innerHTML);
            } else {
                alert("#id2 is undefined");
            };
});

Run Code Online (Sandbox Code Playgroud)

或者,使用.done():

$("#placeholder").load("b.xhtml #id2").done(function(){
            var myTemp = document.querySelector("#id2");
            if (myTemp) {
                alert(myTemp.innerHTML);
            } else {
                alert("#id2 is undefined");
            };
});

Run Code Online (Sandbox Code Playgroud)

我正在尝试使用 .done 方法，但我收到错误`Uncaught TypeError: $(...).load(...).done is not a function` - 有什么想法吗？我正在使用 jQuery 3.1.0。有问题的行是 `$("#song").load("http://kvrx.org #track-name:eq(0)").done(function(){track['trackTitle'] = song .innerHTML});` - 我正在尝试更新一个对象（在此行上方定义） trackTitle 属性。 (2认同)

归档时间：	9 年，2 月前
查看次数：	3886 次
最近记录：	9 年，2 月前