infinite scrollについて

railsで.hoverを使っているコンテンツをinfinitescrollで表示させているのですが、スクロールして後から読み込まれてくるコンテンツに.hoverが効いてくれません。

rails
1.prototype
2  .col-sm-4.col-md-3.proto-content
3    .thumbnail
4      - if current_user.id == prototype.user_id
5        .user_operation
6          %ul.operation_list
7            %li
8              = link_to 'edit', edit_prototype_path(prototype)
9            %li
10              = link_to 'delete', prototype_path(prototype), method: :delete
11      = link_to image_tag(prototype.thumbnails.first.thumbnail.url), prototype_path(prototype)
12      .caption
13        %h3= prototype.title
14        .proto-meta
15          .proto-user
16            = link_to prototype.user.name, user_path(prototype.user)
17          .proto-posted
18            = prototype.created_at.strftime('%b %d')
19        %ul.proto-tag-list.list-inline
20          - prototype.tags.each do |tag|
21            %li
22              .btn.btn-default= link_to tag.name, tag_path(tag)
23

js
1$(document).ready(function(){
2  $('.thumbnail').hover(
3    function(){
4      $(this).find('.operation_list').css('display', 'block');
5    },
6    function(){
7      $('.operation_list').css('display', 'none');
8    }
9  );
10});

どなたか対応策知っておられる方お願いいたします。

orange0190

2016/03/14 06:07

情報が足りません。ソースを載せるなどしてください。

退会済みユーザー

2016/03/14 06:13

すいません、追加しました><

行動規範の内容に同意します

回答1件

ベストアンサー

後から追加された要素にもイベントを設定したい場合には、次のように書くといいと思います。

javascript
1$(function(){
2    $(document).on("mouseenter", ".thumbnail", function(e) {
3        $(this).find('.operation_list').css('display', 'block');
4    });
5    $(document).on("mouseleave", ".thumbnail", function(e){
6        $('.operation_list').css('display', 'none');
7    });
8});