title: .click() sometimes works and sometimes does not
body: <p>the problem I am having is I am trying to apply a click function on a div to a element inside a iframe, it works sometimes but sometimes it doesn't work and it's very random. Here is my code where I apply the click method:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var yammerFrame = parent.parent.document.getElementsByTagName("frame")[1].contentDocument.getElementsByTagName("frame")[0].contentDocument.getElementsByTagName("iframe")[0];
  
      $(yammerFrame).load(function() { 
          var yammerMessages = parent.parent.document.getElementsByTagName("frame")[1].contentDocument.getElementsByTagName("frame")[0].contentDocument.getElementsByTagName("iframe")[0].contentWindow.document.getElementById('yammerMessages');
  
          $(document).ready(function() { 
              $(yammerMessages).click(function() { 
              $('#myModal').modal('show');
          });
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="myModal" class="modal fade" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;!-- Modal content--&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header" style="text-align: center"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt; 
                  &lt;span&gt;
                      &lt;a href="https://www.yammer.com/abcam.com/#/threads/company?type=general"&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Yammer_logo.png" alt="Yammer" style="width: 200px;height: 50px;"&gt;&lt;/a&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="modal-body" style="text-align: center"&gt;
                  &lt;h4 id="modal-body-sender" style="font-weight:bold"&gt;&lt;/h4&gt;
                  &lt;h4 id="modal-body-date"&gt;&lt;/h4&gt;
                  &lt;div id="modal-body-well" class="well"&gt;
                       &lt;h4 id="modal-body-message" style="color:black;word-wrap: break-word;"&gt;&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;div class="btn-group" role="group" aria-label="..."&gt;
                      &lt;button type="button" class="btn btn-primary" onclick="open_win()"&gt;Go To Post&lt;/button&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt; 
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" /&gt;
      &lt;link rel="stylesheet" href="css/Site.css" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt; 
      &lt;span id="yammer-login"&gt;&lt;/span&gt;
      &lt;div id="yammerDiv"&gt;
          &lt;div id="yammerHeader"&gt; 
              &lt;a href="https://www.yammer.com/abcam.com/#/threads/company?type=general"&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Yammer_logo.png" alt="Yammer" height="17px;" width="50%"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="yammerMessages" style="margin-top: 25px;"&gt;
              &lt;img id="loading-gif" src="http://i559.photobucket.com/albums/ss36/madszckey01/speakker/buffering.gif"&gt;
              &lt;div id="text-wrapper" style="width: 100%; height: 76%;"&gt; 
                  &lt;span id="message"&gt;&lt;/span&gt;
              &lt;/div&gt; 
              &lt;span id="sender"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div id="yammerButtons" style="display:none"&gt;
              &lt;button id="previous" type="button" class="btn btn-default btn-xs" aria-label="Left Align" onclick="onPrevious()" dataenter code here-toggle='tooltip' data-placement='top' data-original-title="Previous"&gt; 
                  &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;input type="checkbox" id="myCheck" onclick="autoscroll()" data-toggle='tooltip' data-placement='top' data-original-title="Auto-Scroll" class='checkbox'&gt;
              &lt;button id="next" type="button" class="btn btn-default btn-xs" aria-label="Right Align" onclick="onNext()" data-toggle='tooltip' data-placement='top' data-original-title="Next"&gt; 
                  &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>