前提・実現したいこと
勉強で自作のwebアプリを作成しています。webアプリで設定画面のような物を別のウィンドウで作りたくてjavascriptのopenでサブウィンドウを表示させたのですが、サブウィンドウ内で作成したラジオボタンやチェックボックス、フォームなどが動作しません。一緒に入れているjQueryをコメントアウトすると動作し反対にbootstrapをコメントアウトするとjQueryが動きます、両方とも必要なので動作させる方法がしりたいです。
使用環境
- node.js ver 16.8.0
- express@4.16.4
- jquery-3.6.0.min.js
- bootstrap.min.js ver 5
サブウィンドウ側のコード ※動作しない
ejs
1 <head> 2 <meta charset="UTF-8"> 3 <!--BootstrapのCSS読み込み--> 4 <link rel="stylesheet" href="/plugin/css/bootstrap.min.css" /> 5 <!--両方使うと動作しない--> 6 <!-- BootstrapのJS読み込み --> 7 <script src="/plugin/js/bootstrap.min.js"></script> 8 <script src="/plugin/jquery-3.6.0.min.js"></script> 9 </head>
親ウィンドウのコード ※動作する
こちらも同じ様にBootstrap5とjQueryを入れているのですが、問題なく両方動作します
ejs
1 <head> 2 <meta charset="UTF-8"> 3 <title><%= title%></title> 4 <link rel="stylesheet" href="/stylesheets/style.min.css" /> 5 <link rel="stylesheet" href="/stylesheets/style.css" /> 6 <!--JSTreeの設定--> 7 <script src="/plugin/jquery-3.6.0.min.js"></script> 8 <script src="/plugin/jstree.min.js"></script> 9 <!--vega-lite CDN--> 10 <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script> 11 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script> 12 <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script> 13 <!--BootstrapのCSS読み込み--> 14 <link rel="stylesheet" href="/plugin/css/bootstrap.min.css" /> 15 <!-- BootstrapのJS読み込み --> 16 <script src="/plugin/js/bootstrap.min.js"></script> 17 </head>
エラーメッセージの様なものはなく自分では解決方法が見つけられませんでした。
※追記 サブウィンドウ側のコード
ejs
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <!--BootstrapのCSS読み込み--> 6 <!--<link rel="stylesheet" href="/plugin/css/bootstrap.min.css" />--> 7 <!-- BootstrapのJS読み込み --> 8 <!--<script src="/plugin/js/bootstrap.min.js"></script>--> 9 <script src="/plugin/jquery-3.6.0.min.js"></script> 10 </head> 11 <body> 12 <div class="container" id="setting"> 13 <form id="form" name="form"> 14 <div class="form-group"> 15 <label class="form-label">軸の選択</label> 16 <div class="form-check form-check-inline"> 17 <input class="form-check-input" type="checkbox" name="axis" value="x"> 18 <label class="form-check-label" for="checkbox1">x</label> 19 </div> 20 <div class="form-check form-check-inline"> 21 <input class="form-check-input" type="checkbox" name='axis' value="y"> 22 <label class="form-check-label" for="checkbox2">y</label> 23 </div> <div class="form-check form-check-inline"> 24 <input class="form-check-input" type="checkbox" name="axis" value="z"> 25 <label class="form-check-label" for="checkbox3">z</label> 26 </div> 27 </div> 28 <div class="form-group"> 29 <label class="form-label">表示方法の選択</label> 30 <div class="form-check form-check-inline"> 31 <input class="form-check-input" type="radio" name="pattern" value="multi"> 32 <label class="form-check-label" for="inlineRadio1">multi</label> 33 </div> 34 <div class="form-check form-check-inline"> 35 <input class="form-check-input" type="radio" name="pattern" id="inlineRadio2" value="row"> 36 <label class="form-check-label" for="inlineRadio2">row</label> 37 </div> 38 </div> 39 <div class="mb-3"> 40 <div id="button"> 41 <p for="graph">グラフ作成</p> 42 <input type="button" class="btn btn-outline-primary" id="graph" onclick="onGraph()" value="時系列" /> 43 <input type="button" class="btn btn-outline-primary" id="freq" value="周波数" /> 44 </div> 45 </div> 46 <div class="form-group"> 47 <p for="LPF">LPF</p> 48 <input class="form-text" type="text" id="lowpassform" name="lowpassfilter" value=20> 49 <input class="btn btn-outline-primary" type="button" id="filter" value="ローパスフィルター" /> 50 <label id="formhelp" class="form-text">フィルタ[Hz]を入力してください</label> 51 </div> 52 </form> 53 </div> 54 <p>cccc</p> 55 <script> 56 <!--確認用--> 57 $("p").css("color", "red"); 58 </script> 59 <!--イベントのjsファイル--> 60 <script src="/javascripts/readTree.js"></script> 61 </body> 62</html> 63
エラー表示
FireFoxだとサブウィンドウにもWeb開発ツールが開くことができました。しかしイベントと一緒に入れているjsTreeに関するエラーしか報告されていませんでした。
Uncaught TypeError: $(...).jstree is not a function
回答1件
あなたの回答
tips
プレビュー