ajax 非同期投稿したものにリンクを付与したい

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

rubyでwebアプリのポートフォリオ作成をしています。
その中でajaxを用いた非同期投稿機能を実装したのですが
ajaxでの投稿した物をクリックした際に詳細ページに飛ばすリンク（path）を付与させる方法が分かりません。

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

投稿した物にリンクが付与されない
ページを更新したら元々htmlで記述していたリンクが付与される。

該当のソースコード

ruby
1<body>
2  <div class="wrapper">
3    <%= render  partial: "sidebar" %> 
4    <div class="main">
5      <div class="upper-content">
6        <div class="slider">
7          <div class="slider__item">
8            <%= image_tag "umi1.jpg", class:"slider__item__image", size:"1240x512" %>
9          </div>
10          <div class="slider__item">
11            <%= image_tag "umi2.jpg", class:"slider__item__image", size:"1240x512" %>
12          </div>
13        </div>
14      </div>
15      <div class="under-content">
16        <div class="contents">
17          <% @contents.each do |content| %>
18            <%=link_to content_path(content.id),class:"show-content" do %>
19              <div class="show-content">
20                  <div class="content__title" >
21                  <%= content.title %>
22                </div>
23                <div class="content__image">
24                  <%= image_tag content.image.url, size:"290x190"  %>
25                </div>
26              </div>
27            <% end %>
28          <% end %>
29        </div>
30      </div>
31    </div>
32  </div>
33</body>

js
1$(function() {   //html読みこんでから下の記述実行 必ず記述する
2  // 非同期通信
3  function buildMessage(content){
4    var html = `<div class="show-content">
5                  <div class="content__title" >
6                    ${content.title}
7                  </div>
8                  <div class="content__image" >
9                    <img src=${content.image} width="290" height="190">
10                  </div>
11                </div> `
12    $(".contents").prepend(html); //show-contentの親contentsクラス
13  }
14
15
16
17  $('#new_content').on(`submit`, function(e){
18    e.preventDefault()
19    var formData = new FormData(this);
20    var url = $(this).attr(`action`);
21
22    $.ajax({
23      url: url,
24      type: 'POST',
25      data: formData,
26      dataType: 'json',
27      processData: false,
28      contentType: false
29    })
30
31    .done(function(content){
32      buildMessage(content) //関数呼び出し
33      $('form')[0].reset(); //入力内容が消える
34      $('.content-submit').prop('disabled' , false); //ボタン復活__ボタンクラスと同じクラス名を使用
35      $('.contents').animate({scrollLeft: 0 }, {duration: 4000}); //横スクロール、４秒かけて左端へスクロール      
36    })
37
38    .fail(function(){
39      alert('未入力の項目がございます');
40      $('.content-submit').prop('disabled' , false); //ボタン復活
41    });
42  })
43})

試したこと

jsのloctionプロパティが出てきたため、コードに組み込んでみたが、上手く反映されず
また、反映されたとしても、現在のページしかされないことを後に知りました。

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

ruby (2.5.1)
rails (5.2.3)
jquery-rails (4.3.5)

行動規範の内容に同意します

回答1件

Turbolinksによる影響の可能性があります。
https://teratail.com/questions/238895#reply-347312

また質問と関係ないですが、Railsはremote:trueによって簡単にAjaxを実装することができます。

投稿2020/02/16 11:08

no1knows

総合スコア3365

jun-p

2020/02/16 11:18

ご回答ありがとうございます。質問の書き方が悪く申し訳ないのですが、テキスト${content.title}と画像${content.image}の非同期投稿機能は実装できておりこの２つの親クラスの（show-content）にリンク（<%=link_to content_path(content.id),class:"show-content" do %>）を非同期で投稿した際に上記のリンクを一緒に付与したいのですが、そちらが上手くいきません。ご回答いただいた、Turbolinksですが、当アプリではおらず、そちらのコードも添付すれば良かったです。申し訳ございません。

no1knows

2020/02/16 13:26

参考までに、RailsのRemote:trueを利用した非同期通信。たぶん希望することがもっとシンプルに実装できます。 https://qiita.com/__tambo__/items/45211df065e0c037d032 さらに全く関係ないことですが、経験がないのでわからないですが・・・ポートフォリオを作ってRails開発系に進むという前提で考えると、Remote:trueとかTurbolinksとか使ったほうが良い気がするのですが、そういうのって必要ないのでしょうか？

行動規範の内容に同意します