如何等模态框元素加载后执行操作？为何hide()调用时引用无效？

你的代码无法生效是三个基础逻辑错误导致的：

• 变量作用域错误：vaultCardGroup是定义在setTimeout回调内部的局部变量，外层作用域根本访问不到这个变量，直接在外层调用vaultCardGroup.hide()首先就会触发引用错误。
• 异步执行顺序错误：setTimeout是异步任务，调用monitorForVaultCardGroup()后，JS不会等定时器里的逻辑执行完毕，会直接同步执行后面的vaultCardGroup.hide()，这时候轮询查找元素的逻辑还没开始跑，自然拿不到有效元素。
• 逻辑位置错误：就算把变量提升到外层，你在轮询找到元素后直接return，没有把元素引用传递到外层，hide逻辑的执行时机完全早于元素被找到的时间，不可能生效。

不要把元素操作逻辑写在轮询函数外面，找到元素后直接在判断分支里执行对应操作即可，修正后代码：

function monitorForVaultCardGroup() {
    setTimeout(() => {
        const vaultCardGroup = $("[data-group=VaultCardGroup]");
        if (vaultCardGroup.length > 0) {
            // 找到元素后直接执行隐藏操作
            vaultCardGroup.hide();
            // 值变更重新显示的监听逻辑也建议写在这里，保证能拿到有效元素引用
            // $("#你的触发元素选择器").on("change", () => vaultCardGroup.show())
            return;
        }
        monitorForVaultCardGroup();
    }, 100);
}

// 模态框触发打开时调用轮询即可，不需要在外层额外写hide调用
monitorForVaultCardGroup();

优化提示：如果使用的模态框组件自带渲染完成回调（比如Bootstrap模态框的shown.bs.modal事件），优先使用组件原生回调执行元素查找操作，比定时轮询的性能更好、逻辑更可靠。

内容的提问来源于stack exchange，提问作者jrandomuser