0

「無限スクロールプラグイン」を使用してコンテンツを動的に追加しています。すべての投稿にいいねボタンがありますが、「無限スクロール」で追加されたコンテンツでは機能しません

ここに画像の説明を入力

HTML (アーブ)

<% 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

        });


});

page:負荷は「ターボリンク」用です

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 に答える