HTML のフォームでテキストボックスがいくつか並んでいます。
その中で最後の入力欄が文字で埋まったとき、新しい入力欄を追加しようと思って次のようにしました。
JavaScript
1var form = $('.example-form'); 2 3// 変更時のイベント処理 4var textChanged = function(input){ 5 var textInput = $(input); 6 var lastText = $('input[type="text"]', form).last(); 7 8 // 最後の入力欄でなければ何もしない 9 if( ! textInput.is(lastText) ) return false; 10 11 // 空欄でなければ新しく追加 12 if(textInput.val() != ''){ 13 var textInput2 = $('<input type="text">'); 14 form.append(textInput2); 15 textInput2.on('change', function(){ 16 textChanged(this); 17 }); 18 } 19}; 20 21$('input[type="text"]', form).last().on('change', function(){ 22 textChanged(this); 23});
入力欄を追加するごとに last() が変わってしまうので追加したすべての入力欄にイベントリスナーを登録しています。
そのせいもあって最後でない入力欄の変更であっても不必要な関数の呼び出しが発生します。
条件分岐で除外しているので動作に問題はないですがコード的には雑然としているように見えます。
このように要素が次々に追加される場合での最後の項目に対してのみ監視する場合にはどのように書けばきれいに書けるのでしょうか?
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。