Q&A
下記の<TABLE>に配置した<FORM>（計算シート）で 最後の列にあるinput[radio]の一行挿入の処理をしようとして下の（1番目のJS）を書きました。
（※実際のテーブルの行は400行程度ありますが 最後の行を超えた場合の処理はひとまず先送りにしてます）
この際、一度挿入した行にもう一度挿入しようとしても仮想的に作り出した行には反応してくれないことが解かりました。
そこで、挿入が完了した際、一度SUBMITして受け側のPHPで値を代入して元の画面に戻すことにしたのですが、
このフォームには入力途中で画面移動する際警告を出すスクリプトを組み込んであります。（2番目のJS）
（1番目のJS）でsubmitする際に（2番目のJS）の機能を回避したいのですが 方法が解かりません。
宜しくお願い致します。
HTML
1<form id="quotation"> 2<table> 3 <tr> 4 <th>No</th><th>適用</th><th>数量</th><th>単価</th><th>合計</th><th>操作</th> 5 </tr> 6 7 <tr class="quotation"> 8 <td><input type="number" class="row" value="1"></td> 9 <td><input type="text" class="item" name="item[]" value="" /></td> 10 <td><input type="number" class="num" name="num[]" value="" /></td> 11 <td><input type="number" class="per" name="per[]" value="" /></td> 12 <td><input class="subtotal par" id="subtotal1" type="number" disabled="disabled" value="" /></td> 13 <td> 14 <div class="cogs_inner"> 15 <label>一行挿入 <input class="control" type="radio" value="1" /></label> 16 <label>行削除 <input class="control" type="radio" value="2" /></label> 17 <label>操作3 <input class="control" type="radio" value="3" /></label> 18 <label>操作4 <input class="control" type="radio" value="4" /></label> 19 </div> 20 </td> 21 </tr> 22 23 <tr class="quotation"> 24 <td><input type="number" class="row" value="2"></td> 25 <td><input type="text" class="item" name="item[]" value="" /></td> 26 <td><input type="number" class="num" name="num[]" value="" /></td> 27 <td><input type="number" class="per" name="per[]" value="" /></td> 28 <td><input class="subtotal par" id="subtotal2" type="number" disabled="disabled" value="" /></td> 29 <td> 30 <div class="cogs_inner"> 31 <label>一行挿入 <input class="control" type="radio" value="1" /></label> 32 <label>行削除 <input class="control" type="radio" value="2" /></label> 33 <label>操作3 <input class="control" type="radio" value="3" /></label> 34 <label>操作4 <input class="control" type="radio" value="4" /></label> 35 </div> 36 </td> 37 </tr> 38 39 <tr class="quotation"> 40 <td><input type="number" class="row" value="3"></td> 41 <td><input type="text" class="item" name="item[]" value="" /></td> 42 <td><input type="number" class="num" name="num[]" value="" /></td> 43 <td><input type="number" class="per" name="per[]" value="" /></td> 44 <td><input class="subtotal par" id="subtotal3" type="number" disabled="disabled" value="" /></td> 45 <td> 46 <div> 47 <label>一行挿入 <input class="control" type="radio" value="1" /></label> 48 <label>行削除 <input class="control" type="radio" value="2" /></label> 49 <label>操作3 <input class="control" type="radio" value="3" /></label> 50 <label>操作4 <input class="control" type="radio" value="4" /></label> 51 </div> 52 </td> 53 </tr> 54 </table> 55 </form > 56
「計算シートの操作を行うスクリプト」
JS
1 $( '.control' ).change( function() { 2 3 //ここに入れてみたけどだめでした 4 // $(window).off('beforeunload'); 5 6 var control = Number(this.value); 7 switch(control){ 8 case 1: 9 var this_row = parseInt($(this).closest("tr").find("input.row").val()); 10 11 $(".quotation").each(function() { 12 var row = parseInt($( this ).find(".row").val()); 13 //操作をかけた行だったら 一先ずesc1に代入して 各inputの値をクリア 14 if(row == this_row){ 15 esc1item = $(this).find('.item').val(); 16 esc1num = $(this).find('.num').val(); 17 esc1per = $(this).find('.per').val(); 18 esc1subtotal = $(this).find('.subtotal').val(); 19 20 $(this).find("input.item").val(""); 21 $(this).find("input.num").val(""); 22 $(this).find("input.per").val(""); 23 $(this).find("input.subtotal").val(""); 24 } 25 //操作をかけた行の後の行だったら 各inputの値をesc2に代入して 26 //各inputにesc1の値を挿入 そのあとesc2をesc1に入れ替え 27 if(row > this_row){ 28 var esc2item = $(this).find('.item').val(); 29 var esc2spec = $(this).find('.spec').val(); 30 var esc2num = $(this).find('.num').val(); 31 var esc2per = $(this).find('.per').val(); 32 var esc2subtotal = $(this).find('.subtotal').val(); 33 34 $(this).find("input.item").val(esc1item); 35 $(this).find("input.num").val(esc1num); 36 $(this).find("input.per").val(esc1per); 37 $(this).find("input.subtotal").val(esc1subtotal); 38 39 esc1item = esc2item; 40 esc1num = esc2num; 41 esc1per = esc2per; 42 esc1subtotal = esc2subtotal; 43 } 44 }); 45 //1行挿入された状態で一度サブミット 46 $(document.forms["quotation"]).submit(); 47 48 //ここに入れてみたけどだめでした 49 // $(window).off('beforeunload'); 50 ; 51 break; 52 case 2: 53 ; 54 break; 55 case 3: 56 ; 57 break; 58 case 4: 59 ; 60 break; 61 } 62 }); 63
値が変更されたとき(input要素、select要素が変更された場合)に
ブラウザの戻るや更新ボタン、タブを閉じるときに
警告をだすようにする
JS
1 $(window).ready(function(){ 2 3 $('input, textarea, select, radio').on('keyup change', function(){ 4 5 $(window).on('beforeunload', function() { 6 return "入力途中のデータがあります。このページを離れると、入力したデータが削除されます。本当に移動しますか。"; 7 }); 8 9 $("#cancel").click(function () { 10 $(window).on('beforeunload', function() { 11 return "入力途中のデータがあります。このページを離れると、入力したデータが削除されます。本当に移動しますか。"; 12 }); 13 }); 14 }); 15 16 // 戻るリンクや送信ボタンなどの通常の方法で画面遷移した場合は、 17 // 通常通りアラートは表示されずに遷移する 18 $('button[type=submit], input[type=submit]').on('click', function(e) { 19 $(window).off('beforeunload'); 20 }); 21 }); 22
回答1件
0
ベストアンサー
jsで動的に追加したDOMに関連あるイベント（クリックなど）を
動作させるにはdocumentでイベントの発火を検知する必要があります。
※ 旧バージョンではliveというメソッドがありました。
もしくは、DOMを追加する時にイベントをbindする必要があります。
下記は、documentでイベントを検知する方法です。
もしかしたら、changeイベントを受け取れないかも？
その場合はclickイベントに変更するなど工夫が必要かと思います。
javascript
1$( '.control' ).change( function() { 2 // チェンジした時の処理 3}); 4↓ // 上記を下記に書き換えてみてはどうでしょうか？ 5$(document).on('change', '.control', function () { 6 // チェンジした時の処理 7});
投稿2016/01/12 08:10
総合スコア559
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/01/12 08:45