ドロップダウンメニュー(popover)が2回目以降表示されない

Question

前提・実現したいこと

ドロップダウンメニューをクリックした際、毎回全て表示されるようにしたい。

以下のようなドロップダウンを作成したのですが、一度閉じて２回目以降タイトルしか表示されなくなります。
主にjqueryとbootstrapで実装したのですが、何が原因でこうなってしまうのかヒントを教えていただけないでしょうか????‍♀️

お忙しい中申し訳ありません。

エラーメッセージ

該当のソースコード

index.html.erb

<!-- 検索フォーム -->
<%= search_form_for @search, url: shop_path do |f| %>
  <div id="search-flexbox">
    <div class="search-box-item-left">
      <div class="search-head">エリアで絞り込む</div>
      <!-- ポップオーバーの発火部分 -->
      <div><input class="input-item read-only" type="text" name="q[masseurs_cities_name_eq]" id="q_masseurs_cities_name_eq" data-toggle="popover" data-placement="bottom" title="popover title!" data-content_div_id="popover-search-form" value="東京都渋谷区" readonly></div>
    </div>
    <div class="search-box-item-right">
      <div class="search-btn"><%= f.submit '絞り込む', class: "search-submit-btn" %></div>
    </div>
  </div>
<% end %>

<!-- Bootstrapのpopoverに表示するhtml部分 -->
<div id="popover-search-form">
  <!-- 検索項目/日本区域-->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <span class="returnBtn">←戻る</span>
    <% Region.all.each do |region| %>
      <li class="nav-list">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#region<%= region.id %>" role="tab" aria-controls="profile" aria-selected="false">
          <%= region.area %>
        </a>
      </li>
    <% end %>
  </ul>
  <!-- 検索項目/都道府県/市町村-->
  <div class="tab-content" id="myTabContent">
    <% Region.all.each do |region| %>
      <div class="tab-pane fade" id="region<%= region.id %>" role="tabpanel" aria-labelledby="profile-tab">
        <% region.prefectures.each do |prefecture| %>
          <div class="prefecturesAll">
            <span class="prefecture<%= prefecture.id %>"><%= prefecture.name %></span>
          </div>
          <span class="prefectureLink<%= prefecture.id %>">
            <% prefecture.cities.each do |city| %>
              <div class="cityAll"><%= city.name %></div>
            <% end %>
          </span>
        <% end %>
      </div>
    <% end %>
  </div>
</div>

<script>

// popoverの設定
$('[data-toggle="popover"]').popover({
  html: true,
  container: 'body',
  content: function () {
      var contentDivId = '#' + $(this).data('content_div_id');
      return $(contentDivId).append();
  },
  trigger: 'click'
});

</script>

css

#popover-search-form {
  display:none;
}

実装の解説

<div id="popover-search-form">のpopover-search-formを
" data-content_div_id="popover-search-form"に設定し
data-content_div_idは<script></script>タグ内の.data('content_div_id')でデータ属性として設定しています。

少しややこしいですがこちらの記事を参考にして実装しています。
https://qiita.com/t-hashimoto2192/items/f4cb453c16a6e6358ba7

Bootstrapのpopoverに表示するhtml部分はcssで非表示にしておき、popoverが発火すると見えるようになる仕組みです。
ですが非表示に設定していると発火部分をクリックしてもタイトル部分しか表示されません。
画像1枚目ははcssで非表示にしていない時にクリックしたものです。

試した事

popover-search-form {
display:none;
}
上記のcssコードを消すと

画像のように表示され、この状態で東京都渋谷区(popover発火部分)をクリックした場合、1枚目のように正しく動作します。
なのでcssでpopoverのメニュー部分を見えなくするとクリックした際popoverの中身が消えてしまいます汗

cssで非表示方法を変えてみたりと試したのですが結果は同じでした汗

popoverで表示した要素内にbootstrapが使われていると２回目以降は作動しなくなるようです。

##回答に対しての補足

return $(contentDivId).html(); で試した場合

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

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

Answer 1

  content: function () {
      var contentDivId = '#' + $(this).data('content_div_id');
      return $(contentDivId).append();
  },

contentの無記名functionはどんな内容のコンテンツ(HTML)を表示すれば良いですか？
その内容を返してください。と言っているので

      return $(contentDivId).append();

された結果送られても実行できないよね？(.append()自体このままなら空の追加)
というかcontentDivId自体、目的のIDをさししめしている？

もし目的のIDで合っているなら

    var contentDivId = '#' + $(this).data('content_div_id');　// 表示させたい目的のid
    return $(contentDivId).html();　// 表示させたい目的のidのhtml記載を返答する

だから

Comments

[jun3030]

解答ありがとうございます！

回答に対しての補足を追加しました。

return $(contentDivId).html();で最初試していたのですが、popoverの中身(bootstrap)が作動しなくなります汗
日本区域は出るのですがクリックしても関連した都道府県が出てこなくて、
return $(contentDivId)で試すと作動はするのですが２回目以降は動作しなくなります。汗

[kuma_kuma_]

ええと回答にも書いたのですが

そもそもcontentDivIdの設定方法そのものがまちがっていませんか？
質問者様は初めは都道府県の表を表示
"東京"または"東京都"と書かれた場合は"東京都"の市区町村の表示としたいようですが

> var contentDivId = '#' + $(this).data('content_div_id');

これではそのような処理対応できていませんよね？

その為 $(contentDivId)でほしい情報が取れない
だから表示が空白となります。

[jun3030]

もう一度var contentDivId = '#' + $(this).data('content_div_id');　の部分の処理を考えてみます。

お忙しい中回答ありがとうございました！