teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

コード抜粋を追記しました。

2021/01/19 02:33

投稿

kiara
kiara

スコア0

title CHANGED
File without changes
body CHANGED
@@ -7,4 +7,61 @@
7
7
  要素にslickを使用しており複数枚の写真をフリックで切り替えられる仕様にしています。
8
8
  追加でレンダリングされた要素にslickのjqueryが効いていないようで写真が全部普通に表示されてきてしまいます。
9
9
  ajaxでレンダリングした要素にjqueryを適用させる方法が見つけられず
10
- ご助力いただきたいです。よろしくお願いいたします。
10
+ ご助力いただきたいです。よろしくお願いいたします。
11
+
12
+ (追記)
13
+ ご指摘いただきありがとうございます。仰る通りです。以下コード抜粋です。
14
+
15
+ __index.html.erb__
16
+ ```erb
17
+ <div class="index">
18
+ <article class="articles">
19
+ <%= render 'article_lists' %>
20
+ </article>
21
+ <div class="more">
22
+ <%= link_to_next_page @articles, 'もっと見る', remote: true, id: 'view-more' %>
23
+ </div>
24
+ </div>
25
+ ```
26
+
27
+ ___article_lists.html.erb__
28
+ ```erb
29
+ <% @articles.each do |article| %>
30
+ <section class="article">
31
+ <div class="photos preview-slick">
32
+ <% if article.photos.present? %>
33
+ <% article.photos.each do |photo| %>
34
+ <div class="photo">
35
+ <%= image_tag photo, class: 'article-photo' %>
36
+ </div>
37
+ <% end %>
38
+ <% else %>
39
+ <div class="photo">
40
+ <%= image_tag 'no_image.png', class: 'article-photo' %>
41
+ </div>
42
+ <% end %>
43
+ </div>
44
+ <div class="article-caption">
45
+ <h1><%= article.name %></h1>
46
+ </div>
47
+ </section>
48
+ <% end %>
49
+ ```
50
+ __index.js__
51
+ ```js
52
+ $('.articles').append("<%= escape_javascript(render 'article_lists', object: @articles) %>");
53
+ $("#view-more").replaceWith("<%= escape_javascript(
54
+ link_to_next_page(@articles, 'もっと見る', remote: true, id: 'view_more')) %>");
55
+
56
+ ```
57
+ __articles_controller.rb__
58
+ ```ruby
59
+ def index
60
+ @articles = Article.includes({photos_attachments: :blob}).where(created_at: Time.zone.now.all_day)
61
+ @articles = Kaminari.paginate_array(@articles).page(params[:page]).per(32)
62
+ end
63
+ ```
64
+ __article.rb__
65
+ ```ruby
66
+ paginates_per 32
67
+ ```