在DOMContenLoaded事件处理程序内的表单节点上设置数据设置对象时，我们面临一个奇怪的行为，我创建了一个简单的jsfiddle来描述问题：https://jsfiddle.net/804q13g2/
可以看到的是，我在form#me上设置了三种不同的数据属性，一种是内联的，一种是在DOMContentLoadad内，另一种是在jQuery文档就绪事件处理程序内。当您按下按钮时，数据设置将被粘贴在屏幕上，您可以看到缺少第二个数据属性"ciao":"mondo"。
您能帮我了解为什么会这样吗？
无论如何，我已经看到在堆栈溢出的此处禁用BabelJS / ES5可以正常工作！
document.addEventListener("DOMContentLoaded", function() {
$("#me").data("ciao", "mondo");
})
$(function() {
$("#me").data("ciao2", "mondo2");
$("#btn").click(function() {
var a = $(document.createElement("p")).text(JSON.stringify($("#me").data()));
$("#banner-message").append(a);
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="me" data-test="passed">
<div id="banner-message">
<p>Hello World</p>
<button type="button" id="btn">Change color</button>
</div>
</form>最佳答案
您的脚本可能只有在DOMContentLoaded被触发后才有机会运行。如果您想安全使用它，则应同时考虑以下两种情况：
if (document.readyState === "complete") {
// DOMContentLoaded already fired, no need to wait for it
doStuff();
} else {
window.addEventListener("DOMContentLoaded", doStuff);
}
如果
document.readyState是complete，则意味着DOMContentLoaded已被触发（有关所有文档状态，请参见this）。这就是为什么它在jsfiddle中也不起作用。为了使其正常工作，您需要将脚本设置为在事件触发之前运行，如下所示：
事件的正确顺序是：
document.readyState更改为
interactive窗口的
DOMContentLoaded被触发document.readyState更改为
complete窗口的
load被触发如果要自己验证此订单，请check this fiddle。
关于javascript - 为什么在DOMContentLoaded中设置数据对象不保留在DOM中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59197389/