DOM 元素更改在 JavaScript 代码中不可见

DOM elements changes not visible in javascript code

本文关键字：代码 JavaScript 元素 DOM      更新时间：2023-09-26
setTimeout( function () {
    ajaxLoadFormHeader("A", nRequest_ID, nJeppesen_Number); 
    ajaxLoadFormHeader("B", nRequest_ID, nJeppesen_Number);
    spinner.stop();
    if (document.getElementById("txt_A_Primary_Permits").checked ) {
        showRouting("A");
    }
    if (document.getElementById("txt_B_Primary_Permits").checked ) {
        showRouting("B");
    }
}, 500);

该页面有两个div，用于保存我们正在使用的 A 和 B 路由信息。 我通过隐藏一个并在单击按钮时显示另一个来在它们之间切换。

ajaxLoadFormHeader(( 函数将数据从服务器加载到每个标头窗体上的文本和复选框元素中。

在调用 ajaxLoadFormheader(( 之后，我查看每个表单中的一个复选框元素，并根据选中哪个元素，显示路由div 并隐藏另一个。

问题来了。 在从 ajaxLoadFormHeader(( 函数返回后，当我检查复选框元素的".checked"状态时，它们并不反映 ajaxLoadFormHeader(( 刚刚设置的更改。 在 ajaxLoadFormHeader(( 调用结束时，值没有更改。

我怀疑问题与代码如何更改 DOM 值有关，并且在当前代码块关闭之前更改尚未完成并生效。 换句话说，也许 DOM 更改在 setTimeout(( 函数完成之前是不可见的？

细节：调用 ajaxLoadFormHeader(( 函数后，即使它实际上设置了其中一个复选框的选中状态，(txt_A_Primary_Permits.checked( 和 (txt_B_Primary_Permits.checked( 都返回 false - 即使表单加载并显示选中的框。

注意：这不是全部代码。 有代码用于检测是否未选中任何复选框，或处理两个复选框都处于选中状态的错误条件。 我只包含了相关的代码，供您查看问题。

AJAX 中的第一个 A 代表异步。如果请求确实是异步的，则意味着在后台执行请求时，代码将继续运行。这意味着在请求仍繁忙时，微调器将停止并评估 ifs，因此复选框的状态尚未更新。

解决此问题的正确方法是将回调或事件处理程序附加到请求完成时调用的请求。现在确切的细节取决于您实现ajaxLoadFormHeader的方式，因此很难提供，但希望这些信息至少可以帮助您找到正确的解决方案。

一个

很好的起点是这个问题，这个问题用一个使用 onreadystatechange 事件的"普通"JavaScript AJAX 示例来回答。

相关文章：