gpt4 book ai didi

javascript - 如何在 jQuery .load() 之后更新 DOM?

转载 作者:搜寻专家 更新时间:2023-10-31 22:11:30 26 4
gpt4 key购买 nike

我想从模板文件 (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>

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>
  1. 如何在 .load() 之后更新 DOM?
  2. 是否有更简单的方法从外部 HTML 文件插入 HTML 节点,该文件会自动更新 DOM?
  3. 或者,在将节点插入 a.xhtml 之前(或之后),如何更改或添加 b.xhtml 中的节点属性?例如,如何将 alt="template text"属性添加到 #id2 节点?

最佳答案

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

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

或者,使用 .done():

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

关于javascript - 如何在 jQuery .load() 之后更新 DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38147015/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com