0

我正在使用“无限滚动插件”动态添加内容。在每篇文章中，我都有一个赞按钮，但它不适用于通过“无限滚动”添加的内容

在此处输入图像描述

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>

像.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);
        }

    });
});

滚动.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

        });


});

page:load 用于“ turbolinks ”

4

1 回答 1

1

问题是您的 evant 处理程序（直接）绑定到注入页面的元素。

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。[来源：jQuery 文档]

您必须使用委托事件来附加您的事件处理程序。通过在对 on() 的调用中提供一个选择器来完成这里操作，绑定到一个元素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(...){
    ...
});
于 2013-08-31T21:21:47.590 回答