javascript - 选择器仅在检查/选择元素后工作

Question

我这里有这段代码:

$(document).ready(function() {
    debugger;
    $("div[id^='stage_']").click(function (e) { alert('Hello'); });
});

我无法解释的奇怪事情是，当我在到达调试器语句时在控制台中执行选择器时，它返回一个空数组，[]

但是当我走出去进入页面时，然后在 Chrome 中按 Ctrl-Shift-C 开始检查并单击一些具有我要查找的 ID 的 div，然后在控制台中再次执行选择器，现在我有了我期待的元素。

我什至在这里尝试过这个来验证它是否是异步的。加载问题(这是一个我无法控制的系统)。但是，当到达调试器时，选择器仍然不起作用 - 即使等待 10 秒后(然后我很确定 div 在那里)。我仍然需要进入检查器，以便 jQuery 识别元素。

$(document).ready(function() {
    //debugger;
    setTimeout(function() {
        debugger;
        $("div[id^='stage_']").click(function (e) { alert('allo'); });
    }, 10000);
});

为什么 jQuery 只知道我用 Chrome 的检查器点击过的元素？

Answer 1

我知道有点晚了，但是当您在 Chrome 中打开 Dev Tools 时，执行上下文设置为顶部。如果您的控件位于 iFrame 中，那是不同的上下文，无法从顶部访问。使用下拉菜单选择您的 iFrame 的上下文，您的 jQuery 将返回一个元素。

它在您检查元素时起作用的原因是 Chrome 已经为您选择了执行上下文。

Discussion about iFrame context in Dev Tools