【java script】モーダルウインドウ上でスクリプトを実行させるには

Question

Rails5.2で検索画面を作っているところです。

検索条件の入力部分を、パーシャルにしてモーダルウインドウとして切り出しました。
一覧画面にて、ボタンを押すとモーダルウインドウは表示されます。

困っていること
モーダルウインドウ上でスクリプトが動作しません。
※実行したいタイミングは、select boxチェンジ時

確認したこと
・スクリプト自体には問題なく、他の画面で動作確認済みです。
・モーダル表示前にブラウザ上で右クリック→「ソースの表示」を行うと当然select boxはまだ存在しません。ですが表示後に同様でも存在しません。ちなみに「検証」からだと確認できました。

以上のことから
スクリプト読み込み時に「select boxが生成されていないため認識できない」のが原因かなと予想してます。
見当違いでしたらごめんなさい。

モーダル上でスクリプトを実行するには、どのような方法があるのでしょうか？

以下からソースです↓

/app/views/items/index.html.erb

<%= link_to '詳細検索', items_path, remote: true, class: "btn btn-primary" %>
<div id="search-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>
    

上記で生成されるhtml。

<a class="btn btn-primary" data-remote="true" href="/items">詳細検索</a>
<div id="search-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>
    

モーダルウインドウ側
/app/views/items/_search.html.erb

    <select class="select-parent" name="item[category_id]" id="item_category_id">
      <option value="">選択して下さい</option>
      <option data-children-path="/categories/1/sub_categories" value="1">選択項目１</option>
    </select>
    

スクリプト

$(document).on 'turbolinks:load', ->
    test = ->
      alert("こんにちは")
    $('.select-parent').on
      'change': test

ちなみに、モーダルウインドウ上で右クリック→「ソースの表示」とやっても、
背景側（一覧画面）と同じソースが表示されるんですね。

以上です。

諸先輩方どうかアドバイス宜しくお願いします。

Answer 1

CSSフレームワークを使っていますか？
そうなのであれば、フレームワーク側に解決策が用意されているかもしれません。
フレームワークのモーダルのドキュメントをお読みになるといいかもしれません。

Comments

[pecchan]

有難う御座います。

Bootstrapを使っています。
ドキュメント参照してみます！

[Cojiro]

今簡単にbootstrapのモーダル上でセレクトボックス のチェンジイベントの動作を確かめましたが、正常にevent発砲をキャッチしました。

もしかしたら、JSの読み込み順かもしれません。

[pecchan]

検証までしていただき有難う御座います。

Jsの読み込み順の可能性があるんですね！
現在は、javascripts配下に置いただけで何も指定してません。
なので、turbolinkがひとまとめにしてる→最初の方（DOM作成前）で実行されている？うーん、分からない・・・。

railsでJsの読み込み順の変え方を調べてみます。

ちなみにbootstrapの公式には、マニュアルだけで回避策みたいな情報は特に見当たりませんでした。

[pecchan]

bootstrapのモーダルを使えば、すぐに実現できました。

今回のモーダル部分は以下を参考にしてたのですが、単純なbootstrapのモーダルでなく、プラスrenderとかしてたのが原因だったのかと思います。
https://qiita.com/niwaken/items/ffbce52fb024fd369f24

なぜこんなややこしい方法されてるのか今では意図が分かりません。

「rails モーダル」　でググって出てきたこちらを何も考えず流用した次第でした。

何度もお付き合いいただき有難う御座いました。

Answer 2

modalを初めからhtmlに非表示仕込んでおき、ボタンを押すと表示されるようにする方法があります。

あと
$(document).on('change','.select-parent')
とすると後から出来た要素にも反応するとどっかで読んだ覚えが有りますが。JS弱いので自信有りません

Comments

[pecchan]

いつも有難う御座います。

始めに非表示にしておく方法→調べていますが、また見つかってません。
Js、ほんと良く分かりません（泣）

進展しましたら、また報告させていただきます。

[pecchan]

いつも有難う御座います。

私もJsはよく分からないので、
modalを初めからhtmlに非表示仕込んでおき、ボタンを押すと表示する方法にしました。
bootstrapのモーダルを使えば、すぐに実現できました。

今回のモーダル部分は以下を参考にしてたのですが、単純なbootstrapのモーダルでなく、プラスrenderとかしてたのが原因だったのかと思います。
https://qiita.com/niwaken/items/ffbce52fb024fd369f24

なぜこんなややこしい方法されてるのか意図が分かりませんが、
これがrailsでモーダルを作る方法なんだと思って流用した所でした。