事象
管理サイトをメンテしています。
タブを選択→タブ内のある「編集」ボタンを押下したら同じタブ内が編集モードに切り替わりDBから取得した内容を編集→保存できる様な画面です。
タブは先頭にある追加タブがあり複数作成できます。
タブ内で「編集」ボタンを押下すると”editGroupHtml”の変数内で表示させたいHTMLをコーディングし下記の様にコーディングされ作成されたHTMLをセットしています。
↓
$('#' + currentGroupName).empty().append(editGroupHtml);
実現したいこと
編集画面(生成されたHTML)内のセレクトボックスの値が変化した時に編集画面内の値を取得したいのです。
私なりにコーディングしているのですが、無反応&シンタックスエラーが発生しています。
何方かアドバイスをお願い致します。
よろしくお願い致します。
試したこと
セレクトボックスがチェンジされた際に値を取得したいので、下記の様にコーディングし試してみましたがNGでした。
javascript
1 2① 3 $('select[name="selectTypeEdit"]').on('ifChanged', function(){ 4alert(); 5}); 6 7② 8$('#' + currentGroupName + 'table.addContentTable tbody #selectTypeEdit' ).change( function() { 9alert(); 10}); 11 12③ 13$('[name=selectTypeEdit]').change(function() { 14alert(); 15}); 16
補足情報(ツールのバージョンなど)
PHP VER.7
boostrap3
html
1 2 currentGroupName = $(this).closest('.tab-pane').attr('id'); 3 var currentGroupId = $(this).closest('.tab-pane').data('id'); 4 var currentName = $('a[href="#' + currentGroupName + '"]').text(); 5 var editGroupHtml = ` 6 <div class="tab-pane" id="editGroup"><!-- 編集 --> 7 <div style="padding: 3px;"></div> 8 <div class="row"> 9 10 11 </div> 12 </div> 13 <div style="padding: 5px;"></div> 14 <!---------------------- 左 ----------------------> 15 <div class="col-md-6"> 16 <div class="x_panel"> 17 <div style="padding: 5px;"></div> 18 <div class="control-label col-md-8 top_search"> 19 <div class="input-group"> 20 <input type="text" id="addSearch" class="form-control input" placeholder="コンテンツ名で検索"> 21 <span class="input-group-btn"> 22 <button class="btn btn-default" type="button">検索</button> 23 </span> 24 </div> 25 </div> 26 <div class="form-inline"> 27 <!-- update taguchi REVIEW sakuraba --> 28 <select class="form-control selectTypeEdit" name="selectTypeEdit" id="selectTypeEdit" > 29 <option selected="">種別を選択</option> 30 <?php 31 foreach ($db->getAllRecords('types') as $value5) { 32 echo '<option value="' . $value5['id'] . '">' . $value5['name'] . '</option>'; 33 } 34 ?> 35 </select> 36 <!-- update taguchi REVIEW sakuraba --> 37 <select class="form-control" name="selectShortestEdit" id="selectShortestEdit"> 38 <option selected="">最短を選択</option> 39 <option value="10">10分</option> 40 <option value="15">15分</option> 41 <option value="20">20分</option> 42 <option value="30">30分</option> 43 <option value="60">60分</option> 44 <option value="61">61分</option> 45 <option value="240">240分</option> 46 <option value="720">720分</option> 47 </select> 48 </div> 49 <br> 50 51 </table> 52 </div><!-- x_panel --> 53 </div><!-- col-md-6 --> 54 55 </div><!-- x_panel --> 56 </div><!-- col-md-6 --> 57 </div><!-- 編集 --> 58 `;
回答1件
あなたの回答
tips
プレビュー