JQuery .on для содержимого, добавленного в будущем

Question

Я использую «infinite scroll plugin», чтобы добавить контент динамически. В каждом посте у меня есть Как и кнопка, но она не работает на содержание добавленного с помощью "бесконечной прокрутки"

HTML (ERB)

<% current_user.likes?(post) ? like_icon_name = "icon-thumbs-up" : like_icon_name = "icon-thumbs-up-alt" %> 

<%=link_to "", url_for(controller: "like", action:"toggle", resource_name: post.class.to_s, resource_id: post.id), class:"like #{like_icon_name}", remote: true%> 

HTML (генерируемой)

<a class="like icon-thumbs-up-alt" data-remote="true" href="/it/like/toggle?resource_id=1&amp;resource_name=Photo"></a> 

like.js

$(document).on("ready page:load", function() { 
     $("a[data-remote].like").on("ajax:success", function(e, data, status, xhr){ 
     if(xhr.responseText){ 
      $(e.target).toggleClass("icon-thumbs-up-alt icon-thumbs-up"); 
     }else{ 
      console.log(xhr); 
     } 

    }); 
}); 

Scrolling.js

// usage: 
// $(elem).infinitescroll(options,[callback]); 

// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of 

$(document).on('ready page:load', function() { 

    $('#posts').infinitescroll({ 

     navSelector : "nav.pagination",    
        // selector for the paged navigation (it will be hidden) 

     nextSelector : "nav.pagination .next a:first",  
        // selector for the NEXT link (to page 2) 

     itemSelector : "#posts div.post",   
        // selector for all items you'll retrieve 

     debug  : false,      
        // enable debug messaging (to console.log) 

    }, function(arrayOfNewElems){ 

      $(document).trigger('scrolled'); 

      // optional callback when new content is successfully loaded in. 

      // keyword `this` will refer to the new DOM content that was just added. 
      // as of 1.5, `this` matches the element you called the plugin on (e.g. #content) 
      //     all the new elements that were found are passed in as an array 

     }); 


}); 

страница: нагрузка на "turbolinks"

Answer 1

Проблема заключалась в том, что ваш Эвант обработчик был (directly-), связанного с элементом впрыскивается на страницу.

Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать на странице в то время, когда ваш код делает звонок .on(). ^{[источник: jquery doc]}

Вы должны использовать делегированные события, чтобы прикрепить обработчик событий. Совершено здесь путем предоставления выбора в вызове на(), связанный с элементом that is guaranteed to be present at the time the delegated event handler is attached (e.g. the document element):

$(document).on("ajax:success", "a[data-remote].like", function(...){ 
    ... 
});