选择器仅在检查/选择元素

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时，执行上下文设置为top。如果您的控件位于iFrame内，那是不同的上下文，无法从顶部访问。使用下拉菜单选择iFrame的上下文，然后jQuery将返回一个元素。

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

Discussion about iFrame context in Dev Tools

Answer 2

使用“on”，即使页面加载后元素存在，它仍然有效。

$(document).ready(function(){ 
  //$("div[id^='stage_']").click( function (e) { alert('Hello'); });
  $("body").on('click','div[id^="stage_"]', function (e) { alert('Hello'); });
  $('body').html('<div id="stage_1">teste1</div>' +
                  '<div id="stage_2">teste2</div>' +
                  '<div>blabla</div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

doc：http://api.jquery.com/on/