title: jQuery on click on ajax generated elements randomly doesn't work
body: <p>I'm receiving ajax content using getData() as</p>
  
  <pre><code>$('document').ready(function () {
      getData();
  });
  </code></pre>
  
  <p>In the getDate, elements are dynamically added based on JSON response from server. The elements are added with the following code which is referred as <strong>CodeAddingHTMLFromAbove</strong> in the below code</p>
  
  <pre><code>            $("#list").append('&lt;div class="ui card fluid" id="' + post._id + '"&gt;&lt;div class="content"&gt;&lt;i class="right floated star icon textWhite"&gt;&lt;/i&gt;&lt;div class="header textWhite"&gt;' + post.title + '&lt;/div&gt;&lt;div class="description"&gt;&lt;p class="textWhite"&gt;' + post.description + '&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="extra content"&gt;&lt;span class="left floated like textWhite"&gt;&lt;i class="like icon textWhite likeIcon"&gt;&lt;/i&gt;&lt;span id="upvotes"&gt;' + post.upvotes + '&lt;/span&gt;&lt;/span&gt;&lt;span class="right floated textWhite"&gt;&lt;i class="comments icon textWhite"&gt;&lt;/i&gt;Comments&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;');
  </code></pre>
  
  <p>For better visibility, here is the HTML being appended</p>
  
  <pre><code>&lt;div class="ui card fluid" id="' + post._id + '"&gt;
      &lt;div class="content"&gt;
          &lt;i class="right floated star icon textWhite"&gt;&lt;/i&gt;
          &lt;div class="header textWhite"&gt;' + post.title + '&lt;/div&gt;
          &lt;div class="description"&gt;
              &lt;p class="textWhite"&gt;' + post.description + '&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="extra content"&gt;
          &lt;span class="left floated like textWhite"&gt;
              &lt;i class="like icon textWhite likeIcon"&gt;&lt;/i&gt;
              &lt;span id="upvotes"&gt;' + post.upvotes + '&lt;/span&gt;
          &lt;/span&gt;
              &lt;span class="right floated textWhite"&gt;
              &lt;i class="comments icon textWhite"&gt;&lt;/i&gt;
              Comments
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After each instance of the above statement, onClick listeners are added as</p>
  
  <pre><code>function getData() {
      var data = {
          sortMethod: sortBy,
          lastPost: lastPost
      };
      // process the form
          $.ajax({
              type: 'POST',
              url: '/home/posts',
              data: data,
              dataType: 'json',
              encode: true
          })
          .done(function (data) {
              console.log(data);
              data.posts.forEach(function (post) {
                  **CodeAddingHTMLFromAbove**
                  $("#" + post._id).on("click", ".likeIcon", function () {
                      event.stopPropagation();
                      if ($(this).hasClass("liked"))
                          likeType = false;
                      else
                          likeType = true;
                      console.log(likeType);
                      // like function adds or removes class "liked" from the $this element based on likeType value
                      like(this, likeType);
                      // sendLike has AJAX call which sends and verifies like on server
                      sendLike(likeType, $(this).parent().parent().parent().attr("id"), this);
                  });
                  // lastPost acts as a marker for next content to get
                  lastPost = data.posts[data.posts.length - 1]._id;
                  // when inProcess is true, new content is not requested
                  inProcess = false;
              }
          }
  }
  </code></pre>
  
  <p>The content using getData() is always added as expected.
  Here is the problem though, on random page refreshes , the like on click works as it should and executes the functions as expected. But most times when I refresh, the on click does not execute the like() and sendLike() functions though console.log() executes weirdly printing out two true or two false.</p>
  
  <p>TL;DR: On click listeners on dynamically added content randomly only work on random page refreshes and on rest, all the on click function calls aren't executed but the ones which are executed are executed twice.</p>
  
  <p>**UPDATE: I'm using the following function to get more data on page scroll **</p>
  
  <pre><code>// on scroll get new data
  $(document).scroll(function (e) {
      // grab the scroll amount and the window height
      var scrollAmount = $(window).scrollTop();
      var documentHeight = $(document).height();
      if ((documentHeight - scrollAmount &lt; 1000) &amp;&amp; !inProcess &amp;&amp; !reachedLastPost) {
          inProcess = true;
          getData();
      }
  });
  </code></pre>