前提・実現したいこと
ページに5つの「いいね」ボタンがあって、そのうち何個クリックしたかの数を取得したいと考えています。
「いいね」ボタンはremote: trueを利用し、非同期で状態を変更しています。
発生している問題・エラーメッセージ
最初の一度だけjQueryが動作して、その後は動作しなくなってしまいます。
具体的には、下記のような形です。
一番上の「いいね登録」を押す⇒(jQuery動作する)
⇒一番上の「いいね解除」を押す⇒(jQuery動作しない)
⇒一番上の「いいね登録」を押す⇒(jQuery動作しない)
試したこと
下記のクリック数カウント用jQueryでは、ページ読み込み後の非同期での動作に関しては、感知しないはずだと考え、「いいね」ボタンのパーシャル内に同様のjQueryを記載しましたがきちんと動きませんでした。
本来であれば$.ajax({オプション}).then(成功時の処理, 失敗時の処理);
という書き方ができればと思ったのですが、うまく見つけることができず質問させていただきました。
「いいね」ボタンのパーシャル(remote: true利用)
<!-- _like.html.erb --> <% if post.liked_by?(current_user) %> <p><span>いいね解除: </span><%=link_to post.likes.count, post_likes_path(post.id), method: :delete, class: 'btn goodbtn', remote: true %></p> <% else %> <p><span>いいね登録: </span><%=link_to post.likes.count, post_likes_path(post.id), method: :post, class: 'btn', remote: true %></p> <% end %>
クリック数カウント用jQuery
// application.js document.addEventListener("turbolinks:load", function() { // クリック数をカウントする $('.btn').on('click', function() { var cnt = $(".goodbtn").length; alert(cnt); }); })
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。