いいね機能をActionCableで実装しようとしています。まず、いいねをクリックしたというのを判定しようとしているのですが、それが上手く行かないです。いいねのセレクタをクリックした時に、console.logが表示されるかを確かめようとしましたが。現在いいねはAjaxで実装しているのでそれが原因かもしれないと考えています。
room_channel.js
import consumer from "./consumer"; // $(document).on("turbolinks:render", $(function (){ const chatChannel = consumer.subscriptions.create({ channel: 'RoomChannel',room: $('#messages').data('room_id') },{ connected() { // Called when the subscription is ready for use on the server }, disconnected() { // Called when the subscription has been terminated by the server }, received(data) { const element = document.documentElement; let pre_scrollHeight = element.scrollHeight; $('#messages').append(data['message']); //メッセージ送信後 let expand_error = (pre_scrollHeight - element.scrollTop) - element.clientHeight; if(expand_error >= -1 && expand_error <= 1){ let bottom = element.scrollHeight - element.clientHeight; element.scrollTop = bottom; } return; // Called when there's incoming data on the websocket for this channel }, speak: function(message,user_name) { return this.perform('speak',{ message: message, user_name: user_name }); } }); $(document).on('click', '.chat_sendbtn', function(event) { let content = $('.speaker_txt').val(); if (content === ""){ alert("空白は送信できません"); return event.preventDefault(); } else{ chatChannel.speak(content, $("#user_name").val()); $('.speaker_txt').val(''); $.removeCookie('speaker'); return event.preventDefault(); } }); $(document).on('click', ".like-link", function(event) { console.log("いいね"); }); });
_like.html.erb
<span class="like-link ml-2" id="like-link-<%= message.id %>"> <% @likes_count = Like.where(message_id: message.id).count %> <% if message.likes.where(ip: request.remote_ip).empty? %> <%= link_to message_likes_path(message), method: :post, remote: true do %> <i class="fas fa-thumbs-up like-btn"></i> <% end %> <% else %> <%= link_to message_likes_path(message), method: :delete, remote: true do %> <i class="fas fa-thumbs-up unlike-btn"></i> <% end %> <% end %> <%= @likes_count %> </span>
あなたの回答
tips
プレビュー