选择器仅在检查/选择元素后才能工作

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

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

在开发工具中讨论iFrame上下文

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>

文档： http: //api.jquery.com/on/