title: JQuery .on("click"... works intermitently
body: <p>I have a piece of code:</p>
  
  <pre><code>$("body").on("click", ".reply-button", function(){
      alert("test");
  });
  </code></pre>
  
  <p>That is suppose to alert me when I click on an element that is generated on the fly (it is not part of the DOM when this code is executed).</p>
  
  <p>Sometimes it works just as it's suppose to. I click the button and a little alert pops up. However, other times it stop working. Nothing I bind to it will work. If I bind to the container div (also generated on the fly), it does work, but not if I change the handler to incorporate button.</p>
  
  <p>I am asking for what could be the possible reasons for this error? I do not know how to go about debugging this. My first guess was that it was something due to <code>stopImmediatePropagation</code> or <code>stopPropagation</code> but I couldn't find that being used in the same area.</p>
  
  <p>Does anyone have any idea on how I should go about debugging this?</p>
  
  <p>EDIT:
  How is the DOM being generated?</p>
  
  <p>I get the HTML from a template that's hidden.</p>
  
  <pre><code>var html = $("#template").html();
  </code></pre>
  
  <p>Then I append the template to a div container</p>
  
  <pre><code>$("#container").append(html);
  </code></pre>
  
  <p>EDIT2:
  Here is the template being pulled:</p>
  
  <pre><code>&lt;div id="tweets-container" class="feed-wrapper"&gt;
  &lt;/div&gt;
  
  &lt;div id="tweet-template" style="display:none;"&gt;
      &lt;!-- Tweet 1 --&gt;
      &lt;div class="tweet animated" data-scannedTweetId="s_id"&gt;
          &lt;!-- User --&gt;
          &lt;div class="tweet-user"&gt;
              &lt;!-- User picture --&gt;
              &lt;img class="tweet-user-picture" src="s_twt_owner_profile_img_url" /&gt;
  
              &lt;!-- User info --&gt;
              &lt;div class="tweet-user-info"&gt;
                  &lt;!-- User name --&gt;
                  &lt;div class="tweet-user-info-name"&gt;
                      &lt;a href="//twitter.com/s_twt_owner_sn" target="_blank"&gt;s_twt_owner_name (@s_twt_owner_sn)&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;!-- User biography --&gt;
                  &lt;div class="tweet-user-info-biography"&gt;
                      s_twt_owner_desc
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- User statistics (following, followers, and tweets) --&gt;
          &lt;span class="tweet-statistics animated"&gt;
              &lt;div class="following"&gt;
                  &lt;div class="statistic-count"&gt;&lt;a href="http://twitter.com/s_twt_owner_sn/following"&gt;s_twt_owner_num_following&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="statistic-label"&gt;following&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="followers"&gt;
                  &lt;div class="statistic-count"&gt;&lt;a href="http://twitter.com/s_twt_owner_sn/followers"&gt;s_twt_owner_num_follower&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="statistic-label"&gt;followers&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="tweets"&gt;
                  &lt;div class="statistic-count"&gt;&lt;a href="http://twitter.com/s_twt_owner_sn"&gt;s_twt_owner_num_twt&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="statistic-label"&gt;tweets&lt;/div&gt;
              &lt;/div&gt;
          &lt;/span&gt;
  
          &lt;!-- Tweet bars/graph --&gt;
          &lt;div class="side-information animated"&gt;
              &lt;div class="bar-wrapper"&gt;
                  &lt;!-- Actual bars --&gt;
                  &lt;div class="bars"&gt;
                      &lt;div class="bar big-bar bar-green" style="height: tqes_heightpx; background: tqes_color;" data-toggle="tooltip" data-placement="top" title="tq_engage_score"&gt;&lt;/div&gt;
                      &lt;div class="bar bar-yellow" style="height: tqrs_heightpx; background: tqrs_color;" data-toggle="tooltip" data-placement="top" title="tq_relevancy_score"&gt;&lt;/div&gt;
                      &lt;div class="bar bar-light-green" style="height: sks_heightpx; background: sks_color;" data-toggle="tooltip" data-placement="top" title="s_klout_score"&gt;&lt;/div&gt;
                      &lt;div class="bar bar-green" style="height: sls_heightpx; background: sls_color;" data-toggle="tooltip" data-placement="top" title="s_legitimacy_score"&gt;&lt;/div&gt;
                      &lt;div class="bar bar-gray" style="height: tqgs_heightpx; background: tqgs_color;" data-toggle="tooltip" data-placement="top" title="tq_geography_score"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Labels that correspond with each bar --&gt;
                  &lt;div class="bar-labels"&gt;
                      &lt;div class="bar-label big-bar-label" data-toggle="tooltip" data-placement="bottom" title="Score"&gt;tq_engage_score&lt;/div&gt;
                      &lt;div class="bar-label-icon" style="font-size: 12px; color: #000;" data-toggle="tooltip" data-placement="bottom" title="Relevancy"&gt;
                          &lt;i class="fa fa-bullseye"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;div class="bar-label-icon" data-toggle="tooltip" data-placement="bottom" title="Influence"&gt;
                          &lt;i class="fa fa-users"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;div class="bar-label-icon" data-toggle="tooltip" data-placement="bottom" title="Legitimacy"&gt;
                          &lt;i class="fa fa-check-circle"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;div class="bar-label-icon" data-toggle="tooltip" data-placement="bottom" title="Geography"&gt;
                          &lt;i class="fa fa-map-marker"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Notes below the bars/graph --&gt;
              &lt;div class="explanations"&gt;
                  &lt;!-- Note below the bars/graph --&gt;
                  &lt;div class="explanation"&gt;
                      &lt;div class="explanation-check"&gt;&lt;i class="fa fa-first-comment"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/i&gt;
                          &lt;div class="explanation-text"&gt;
                              comment_one
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Note below the bars/graph --&gt;
                  &lt;div class="explanation"&gt;
                      &lt;div class="explanation-check"&gt;&lt;i class="fa fa-second-comment"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/i&gt;
                          &lt;div class="explanation-text"&gt;
                              comment_two
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Tweet score --&gt;
          &lt;div class="score-wrapper"&gt;
              &lt;div class="score animated"&gt;tq_engage_score&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Tweet content --&gt;
          &lt;div class="tweet-content"&gt;
              s_twt_text
          &lt;/div&gt;
  
          &lt;!-- Time since tweet was posted --&gt;
          &lt;div class="tweet-time-elapsed"&gt;
              s_twt_time
          &lt;/div&gt;
  
          &lt;!-- Area below tweet with reply textarea and buttons --&gt;
          &lt;div class="tweet-reply-section animated"&gt;
              &lt;!-- Reply textarea --&gt;
              &lt;textarea class="tweet-reply animated"&gt;@s_twt_owner_sn &lt;/textarea&gt;
  
              &lt;!-- Buttons --&gt;
              &lt;div class="buttons animated"&gt;
                  &lt;!-- Small buttons on top of reply button --&gt;
                  &lt;div class="top-buttons"&gt;
                      &lt;span class="character-count"&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Reply button --&gt;
                  &lt;div class="reply-button"&gt;
                      Reply &lt;i class="fa fa-reply"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>   /**
       * Add a tweet to the feed.
       */
      function _addTweetToFeed(tweet, keywords) {
          /** Get the tweet template */
          var tweetHtml = $('#tweet-template').html();
  
          // add score heights and colors properties to the tweet
          tweet = _setScoreBars(tweet);
  
          /** Linkify elements of the tweet */
          tweet.s_twt_text = twitterify(tweet.s_twt_text); // the tweet
          tweet.s_twt_owner_desc = twitterify(tweet.s_twt_owner_desc);
  
         // fix search terms to be highlighted
          tweet.s_twt_text = _highlightSearchTerms(tweet.s_twt_text, keywords); // the tweet
          tweet.s_twt_owner_desc = _highlightSearchTerms(tweet.s_twt_owner_desc, keywords);
  
         // change from twitter links to readable links
         tweet = _fixTweetLinks(tweet);
  
          /** Make numbers readable */
          tweet.s_twt_owner_num_following = abbrNum(tweet.s_twt_owner_num_following, 1);
          tweet.s_twt_owner_num_follower = abbrNum(tweet.s_twt_owner_num_follower, 1);
          tweet.s_twt_owner_num_twt = abbrNum(tweet.s_twt_owner_num_twt, 1);
  
          /** Loop through the properties of tweet object and populate tweetHtml with them */
          for (var prop in tweet) {
              if (tweet.hasOwnProperty(prop)) {
                  tweetHtml = _replaceAll(tweetHtml, prop, tweet[prop]);
              }
  
              // add comments
              tweetHtml = _addComments(tweet, tweetHtml);
  
              /** If both location and url are not present, remove the comma */
              if (!(tweet.s_twt_owner_loc &amp;&amp; tweet.s_twt_owner_url)) {
                  $('#url_comma').html('');
              }
          }
          $('#tweets-container').append(tweetHtml);
      }
  </code></pre>