Обработчики кликов не запускаются при добавлении элементов

Question

Итак, у меня есть некоторые результаты, которые имеют элементы, которые можно переключать, скрывать/показывать и т. Д. Этот бит работает отлично, за исключением элементов, которые добавляются в нижней части результатов. Обработчик кликов не срабатывает, но работает на других. Я предполагаю, что это связано с чтением узлов во время загрузки страницы. Как получить добавленные элементы для работы?

<div class="event"> 
          <a href="/profile/00000000"> 
          <img class="user-image" src="https://graph.facebook.com/00000000/picture?width=100&amp;height=100"> 
          </a> 
          <div class="event-info"> 
           <div class="content"> 
            <div class="event-time-location"> 
            <span class="user-name">Levi Thornton</span> 
            <span class="user-action-time">Posted 21 minutes ago</span> 
            </div> 
             <div class="event-caption">1 
</div>                  </div> 
           <div class="event-like-comment"> 
            <input id="js-eventId" type="hidden" value="201" name="eventId"> 
                     <a href="#" class="event-liked hidden">liked</a><a href="#" class="event-like">like</a>         <a href="#" class="js-event-comment">comment</a> 
            <a href="/shindig/201" class="event-view">more</a> 
           </div> 

          </div> 


          <div class="comments" id="comments-201" style="display: block;"> 
         <div class="newComments"> 
           <input id="js-eventId" type="hidden" value="201" name="eventId"> 
           <textarea class="addComment" value="Write a comment..." placeholder="Write a comment..." title="Write a comment..."></textarea> 
          </div> 
                </div> 
         <!-- comments --> 


          <div class="clear"></div> 
         </div> 

The JQ:

... 
    // add like 
    $(".event-like").click(function(event){ 
     event.preventDefault(); 
       var likeBtn = $(this); 
       $.post('/shindig/ajax-like-event', { eventId: $(this).siblings('#js-eventId').val(), userLogged: $('#js-userLogged').val(), ajax: true}, function(data){ 
        if(data['success']){ 
         likeBtn.hide(); 
         likeBtn.siblings(".event-liked").show(); 
        } else { 
         if(data['noaccess']){ 
          window.location.href = data['url']; 
         } 
        } 
       },"json"); 
    }); 
    // soft delete like 
    $(".event-liked").click(function(event){ 
     event.preventDefault(); 
       var likeBtn = $(this); 
       $.post('/shindig/ajax-unlike-event', { eventId: $(this).siblings('#js-eventId').val(), userLogged: $('#js-userLogged').val(), ajax: true}, function(data){ 
        if(data['success']){ 
         likeBtn.hide(); 
         likeBtn.siblings(".event-like").show(); 
        } else { 
         if(data['noaccess']){ 
          window.location.href = data['url']; 
         } 
        } 
       },"json"); 
    }); 
    // hit bottom scrolling, load more results 
    $(window).scroll(function() { 
     if($(window).scrollTop() == $(document).height() - $(window).height()) { 
      console.log('bottom'); 

      $.post('/index/ajax-feed-items-by-time', { pager: $("#js-pager").val(), ajax: true}, function(data){ 
       $(".feedContent").append(data); 
       $pager = $("#js-pager").val()+10; 
       $("#js-pager").val($pager); 
      }); 
     } 
    }); 

Answer 1

Заменить

$(".event-like").click(function(event) { 

с

$(document).on("click", ".event-like", function(event) { 

и так же на протяжении всего кода. Это называется событие делегирование, и лучшее место, чтобы начать читать об этом jQuery documentation.