【Rails × jQuery】コメントの削除をAjaxを使ってみましたがうまくいきません、アドバイスなどお願いできますでしょうか

Question

前提・実現したいこと

railsでアプリを作成中です。コメントの削除機能はdestroyアクションで動作をします。これをAjaxを使用して非同期で動作するようにもっていきたいです。コメントの投稿はAjaxを使って実装済みです。初学者で申し訳ありませんが、アドバイスなどいただけますでしょうか？

コメントの削除機能をAjaxを用いて実装しようとしていますが、エラーどころかconsole上でイベント発火もしていない状況です。。。

状況としては下記の通りです。
①create（投稿）とdestroy（削除）でjsファイルをわけています。
②destroyのAjaxはイベント発火せず、リロードして削除されてしまいます(検証→consoleに何も表示されず）
③createのAjax実装はできており、動作も問題なくできていますのでAjaxの準備はできています。

発生している問題・エラーメッセージ

エラーどころか、イベントも発火していない状況です。。。。
下記コードを表示しますのでよろしくお願いします。

該当のjsソースコード

(comment_destroy.js)

$(function () {
  $('.Review-wrapper__list').on('click', ".Review-infomation__right--trash", function (e) {
    e.preventDefault();
    e.stopPropagation();
    let url = $(this).attr("href");
    $.ajax({
      url: url,
      type: "POST",
      data: {
        _method: "delete",
      },
      dataType: "json"
    })
    .done(function(data) {
      $(".Review-wrapper__list" + data.id + data.job_id).remove();  
    })
  })
});

該当のソースコード（コントローラー）

(ReviewController)

class ReviewsController < ApplicationController
  def create
    @review = Review.create(review_params)
    respond_to do |format|
      format.html { redirect_to "/matches/#{@review.job_id}.reviews" }
      format.json
    end
  end

  def destroy
    @review = Review.find_by(id: params[:id], job_id: params[:job_id])
    respond_to do |format|
      if @review.present?
        @review.destroy
        format.html { redirect_to "/matches/#{@review.job_id}.reviews" }
        format.json { render json: { id: params[:id], job_id: params[:job_id]} }
      end
    end
  end

  private
  def review_params
    params.require(:review).permit(:good, :bad).merge(user_id: current_user.id, job_id: params[:job_id])
  end
end

該当のソースコード（html.haml）

下記コードが投稿されたコメント(口コミ）です。
削除したいクラスは「.Review-wrapper__list」の中身全体です。

.Review-wrapper
      みんなの口コミ！（会社・仕事）
      .Review-wrapper__title
        - @reviews.each do |review|
          .Review-wrapper__list
            .Review-top
              .Review-icons
                .Reiview-icons__face
                  =image_tag current_user.image.to_s, class: 'Review-icons__face--image'
                .Review-icons__nickname
                  =current_user.nickname
              .Review-time
                =review.updated_at

            .Review-infomation
              .Review-infomation__left
                .Review-infomation__left--good
                【よかった点】
                .Review-infomation__left--text
                  =review.good
                .Review-infomation__left--good
                【わるかった点】
                .Review-infomation__left--text
                  =review.bad
              .Review-infomation__right
                .Review-infomation__right--destroy
                  = link_to job_review_path(review.job.id, review.id), method: :delete do
                    =icon('far','trash-alt', class: 'Review-infomation__right--trash')

参考：createアクションのAjaxコード

(comment.js)　　（一応記載させてもらいます）

$(function () {
  function buildHTML(comment) {
    let html =
      `<div class="Review-wrapper__list">
        <div class="Review-top">
          <div class="Review-icons">
            <div class="Review-icons__face">
              <img class="Review-icons__face--image" src = "${comment.image}">
            </div>
            <div class="Review-icons__nickname">
              ${comment.user_name}
            </div>
          </div>
          <div class="Review-time">
            ${comment.created_at}
          </div>
        </div>
        <div class="Review-infomation">
          <div class="Review-infomation__left">
            <div class="Review-infomation__left--good"></div>
              【よかった点】
            <div class="Review-infomation__left--text">
              ${comment.good}
            </div>
            <div class="Review-infomation__left--good"></div>
              【わるかった点】
            <div class="Review-infomation__left--text">
              ${comment.bad}
            </div>
          </div>
          <div class="Review-infomation__right">
            <div class="Review-infomation__right--destroy">
              <a rel="nofollow" data-method="delete" href= "/jobs/${comment.job}/reviews/${comment.review_id}"><i class="far fa-trash-alt Review-infomation__right--trash"></i></a>
            </div>
          </div>
        </div>
      </div>`
    return html;
  }

  $('#new-comment').on('submit', function (e) {
    e.preventDefault();
    console.log(this)
    let formData = new FormData(this);
    let url = $(this).attr('action')
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function (data) {
      let html = buildHTML(data);
      console.log(html)
      $('.Review-wrapper__title').append(html);
      $('#new-comment')[0].reset();
      $('.Review-button__submit').prop('disabled', false);
    })
  })  
});

該当のjbuilder

(create.json.builder)

json.good         @review.good
json.bad          @review.bad
json.image        @review.user.image.url
json.user_id      @review.user.id
json.user_name    @review.user.nickname
json.created_at   @review.created_at.strftime("%Y年%m月%d日 %H時%M分")
json.job          @review.job.id
json.review_id    @review.id

試したこと

イベントが発火していないということは対象のclassが間違っているとも思ったので何回かクラスを変えてみました。

状況が似ている記事の中でも、下記の記事を参考にさせていただき解決に向かおうとしました。
①https://qiita.com/t-yama-3/items/7148d25b17e70ceb48d6#2-1-1-3-failfunction-
②https://qiita.com/sakuraniumarete/items/9eed397eb3597dcdb952

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

ruby '2.6.5'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.4.4'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'

省略

gem 'jquery-rails'

ここにより詳細な情報を記載してください。

Answer 1

comment_destroy.js

/* 構成をみるとReview-wrapper__listの下にReview-infomation__right--trashがない
$('.Review-wrapper__list').on('click', ".Review-infomation__right--trash", function (e) {
*/

$('.Review-infomation__right').on('click', ".Review-infomation__right--trash", function (e) {

という事ですか？