投稿された記事に対してコメント機能を実装しています。コメント機能をjs.erbを用いて非同期で部分的に変更したのですが、その際にすでに読み込めれていたjsが反応しなくなりました。

Question

前提・実現したいこと

投稿された記事に対してコメント機能をjs.erbファイルを用いて部分的に非同期で変更したのですが、コメントする前に読み込めれていたjsがコメントを投稿後に反応しなくなりました。
また、非同期でのコメント機能は正常に動作しています。
特にエラーなどはでず、コメントの送信ボタンを押すとコメント保存されています

該当のソースコード

# view/articles/index.html.erb

<div class="timeline-content">
  <div id="scroll">
    <% @articles.each do |article| %>
      <div class="card">
        <div class="card-top">
          <div class="left-side">
            <%= image_tag article.celeb.image, class: "image"%>
            <div class="profile">
              <p style="font-weight: bold;"><%= article.celeb.name%></p>
              <p><%= l article.created_at, format: :short %></p>
            </div>
          </div>
          <div class="right-side">
            <i class="fa fa-bars"></i>
            <div class="down-bar hidden">
              <% if @current_celeb && article.celeb.id == @current_celeb.id%>
                <ul>
                  <li><%= link_to "削除", article_path(article.id), method: :delete ,class: "card-bar"%></li>
                  <li><%= link_to "編集", edit_article_path(article) ,class: "card-bar"%></li>
                  <li><%= link_to "公開設定を変更","#" ,class: "card-bar"%></li>
                </ul>
              <% else %>
                <ul>
                  <li><%= link_to "この投稿を非表示にする", edit_article_path(article) ,class: "card-bar"%></li>
                  <li><%= link_to "この投稿者の投稿を非表示","#" ,class: "card-bar"%></li>
                  <li><%= link_to "この投稿を通報する","#" ,class: "card-bar"%></li>
                </ul>
              <% end %>
            </div>
          </div>    
        </div>
        <div class="card-body">
          <% if article.image.attached? %>
            <div class="samune">
              <%= image_tag article.image, class: "samune-image"%>
            </div>
          <% end %>
          <p class="card-title"><%= article.title%></p>
          <p class="card-text"><%= article.content%></p>
        </div>
        <div class="card-like" id="like-<%= article.id%>">
          <%= render partial: "like" , locals: {article: article}%>
        </div>
        <% if current_user %>      
          <%= form_with model: @comment, url:  article_comments_path(article.id), remote: true do |f|%>
            <div class="comment-space">
              <%= image_tag current_user.image, class: "comment-user-img"%>
              <%= f.text_area :content, class: "comment", placeholder: "コメントを入力"%>
              <%= f.submit "送信", class: "comment-submit"%>
            </div>
          <% end %>   
        <% end %>
        <div class="comment-body" id="comments-<%= article.id%>">
          <%= render partial: "comment", locals: {article: article} %>
        </div>
      </div>
    <% end %>
    <div class='hidden'><%= paginate @articles %></div> 
  </div>
</div>

# view/articles/_comment.html.erb

<% unless article.comments.empty? %>
  <div class="comment-index">
    <p class="more-comment">コメント<%= article.comments.count%>件</p> 
    <div class="comments hidden">
      <% article.comments.each do |comment| %>
        <div class="comments-set">
          <div class="left-side">
            <%= image_tag comment.user.image, class: "comment-user-img"%>
            <div class="comment-profile">
              <div class="comment-time">
                <p style="font-weight: bold;"><%= comment.user.nickname%></p>
                <p style="color: #868686;"><%= l comment.created_at, format: :short%></p>
              </div>
              <p class="comment-content" style="color: #868686;"><%= comment.content%></p> 
            </div>
          </div>
          <div class="right-side">
            <% if current_user && comment.user_id == current_user.id%>
              <%= link_to "×", article_comment_path(article.id, comment.id), method: :delete, class: "delete-btn", remote: true%>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

# view/comments/create.js.erb

$('#comments-<%= @article.id%>').html("<%= j(render partial: 'articles/comment', locals: {article: @article}) %>");

# view/comments/destroy.js.erb

$('#comments-<%= @article.id%>').html("<%= j(render partial: 'articles/comment', locals: {article: @article}) %>");

$(document).on("turbolinks:load", function() {
  var article = function(){

   ### .more-commentの要素をクリックするとコメントの一覧が出現する
  const MoreComment = document.querySelectorAll(".more-comment")
  MoreComment.forEach((comment) => {
    comment.addEventListener("click", () => {
      const CommentIndex = comment.parentNode.querySelector(".comments")
      if (CommentIndex.classList.contains("hidden")){
        const Comments = document.querySelectorAll(".comments")
        Comments.forEach(com => com.classList.add("hidden"))
      }
      CommentIndex.classList.toggle("hidden")
    })
  })

  ### .right-sideの要素をクリックすると、サイドのバーが出現する
  const DownMenu = document.querySelectorAll(".right-side")
  DownMenu.forEach((icon) => {
    icon.addEventListener("click", () => {
      const DownBar = icon.parentNode.querySelector(".down-bar")
      if (DownBar.classList.contains("hidden")){
        const DownBars = document.querySelectorAll(".down-bar")
        DownBars.forEach(bar => bar.classList.add("hidden"))
      }
      DownBar.classList.toggle("hidden")
    })
  })

 ### コメントの記入欄の高さが改行に応じて変化する
  var lineHeight = parseInt($('.comment').css('lineHeight'));
  $('.comment').on('input', function() {
    var lines = ($(this).val() + '\n').match(/\n/g).length;
    $(this).height(lineHeight * lines);
  });
  }

  article(); ## 上で定義したarticleをturbolinksが読み込まれたら実行

  $(document).on('scrollThreshold.infiniteScroll', function() {
    article();
  }) 
  $(document).on('append.infiniteScroll', function() {
    article();
  })　## InfiniteScrollを用いて無限スクロールを導入しているので新たに画面が読み込まれたらこちらの二つを実行

  $(".comment-body").on("DOMSubtreeModified propertychange",function(){
    $(".comment").val;
    article();
  });　## classのcomment-bodyに新たにDOMが加えられたらこちらを実行。しかしうまくいかなかった。

});

試したこと

新しくコメントがDOMとして追加されたらというのを”DOMSubtreeModified propertychange”としてイベント発火させようとしたのですが、コメントが投稿されても発火しませんでした。

補足情報（FW/ツールのバージョンなど）

rails 6.0

Answer 1

【JavaScript + JQuery】DOMの変更を監視するリスナー

DOMSubtreeModified propertychange が発火しないのは、
この記事の「セレクタが配列だとだめ」に該当するからかもしれません。

create/destroy.js.erb でイベントを発生させる

$('#comments-<%= @article.id%>').html("<%= j(render partial: 'articles/comment', locals: {article: @article}) %>");
// 下記を追加
document.dispatchEvent(new Event('updateComment'));

イベントを処理する

$(document).on("updateComment", function () {
  article()
})

Comments

[so_ma]

こちらのやり方でやってみたのですが、create/destroy.js.erbの記載したものが反応しなかったですね。。

[so_ma]

js.erbでイベントの発火をすることができなかったら、コメントの一覧に追加があったときにイベント発火させる方法しかないのかなあと思ったのですが、どうでしょうか？？

[neko_daisuki]

こちらの環境だと

create.js.erb(POST /) に
document.dispatchEvent(new Event('updateComment'));

application.js(Sprockets) に
//= require rails-ujs
document.addEventListener("updateComment", () => {
console.log("fired")
})

とかいて、application.html.erb の下のボタンをクリックしたら
<%= link_to "button", root_path, method: "post", remote: true %>

fired と表示されました。

[so_ma]

自分の方ではtimeline-form.jsにdocument.addEventListener("updateComment", () => {
console.log("fired")
})を
create.js.erb方にdocument.dispatchEvent(new Event('updateComment'));と追加してやってみたのですが、firedと表示されることはなかったですね。。
ちなみにこのdispatchEventと言うのは.on("click")のようなイベント発火とは何が異なるのですか？？

[neko_daisuki]

dispatchEvent で引数のイベントを発生させてます。
それを addEventListener (jQuery だと on) で監視します。

このイベントを発生させたとき、ブラウザのコンソールには何かエラーが表示されていませんか？

[neko_daisuki]

1.開発者ツールを開く
2.上のタブから Elements を選択
3. 右のパネル(Styles Computed ...) からEvent Listeners を選択

ここに updateComment があるかも確認してみてください。