title: JQuery .children() not returning dynamically added elements?
body: <p>I am integrating a live chat functionality and I am trying to use a JQuery statement to get the chat session ID from a div ID that is not created until a chat is started. (It is dynamically added to the page.) Of course logically, I am making sure that I don't try to select the element until after a chat has started and it exists. Here is the relevant HTML structure and the line of code that I am using:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!--These do not exist until a chat is started--&gt;
      &lt;div class="customer_inner_widget"&gt;
          &lt;div id="chat-session-5748220" style="height:100%;"&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$(".customer_inner_widget").children().first().attr("id").split("-")[2]
  </code></pre>
  
  <hr>
  
  <p>The strangest thing is that under normal circumstances either when I run it in my script upon closing the chat OR I run it in Google Chrome Developer Tools Console AFTER a chat has started, it does not work:</p>
  
  <pre><code>Output:
      Uncaught TypeError: Cannot read property 'split' of undefined
          at &lt;anonymous&gt;:1:58
  </code></pre>
  
  <p>...but If I simply right click on the chat window on my page and select "inspect", then run the same line of code in the console... it works:</p>
  
  <pre><code>Output:
      "5748220"
  </code></pre>
  
  <p>How does just inspecting the HTML wilth Chrome suddenly cause it to work...? How can I perform this hidden magic in my script?</p>