title: Selector only working after inspecting/selecting element
body: <p>I have this code here:</p>
  
  <pre><code>$(document).ready(function() {
      debugger;
      $("div[id^='stage_']").click(function (e) { alert('Hello'); });
  });
  </code></pre>
  
  <p>The weird thing I can't explain is, that when I execute the selector once I'm in the console when reaching the debugger statement, it returns an empty array, <code>[]</code></p>
  
  <p>But when I step out and go on the page, then hit Ctrl-Shift-C in Chrome to start inspecting and click on some of the div's that have the ID I'm looking for then execute the selector again in the console, now I have the elements I'm expecting.</p>
  
  <p>I have even tried this here so to validate whether it was an async. loading issue (this is a system over which I don't have all the control). but still, when reaching the debugger, the selector doesn't work - even after waiting 10 seconds (which then I'm pretty sure the div's are there). I still have to go in inspector so jQuery recognize the elements.</p>
  
  <pre><code>$(document).ready(function() {
      //debugger;
      setTimeout(function() {
          debugger;
          $("div[id^='stage_']").click(function (e) { alert('allo'); });
      }, 10000);
  });
  </code></pre>
  
  <p>Why would jQuery only be aware of elements that I've clicked on with Chrome's inspector ?</p>