###前提・実現したいこと
動的にセレクトメニューを追加/削除し、且つ選択した値は他のセレクトメニューでは選択できないよう制御するフォームを作成しております。
フォーム自体は完成したのですが、元々書いていたコードでは意図した動きとならず、以下に記載するように記載すると意図した動作となりました。
###該当のソースコード
問題箇所のみ抜粋(意図した動作):
// (-)buttonがクリックされた時の処理 $(document).on('click', '.del', function(){ var removeObj = $(this).parent(); removeObj.fadeOut('fast', function() { removeObj.remove(); console.log('#1'); // 番号振り直し frm_cnt = 0; $(".custom-block[id^='custom-block']").each(function(idx, obj) { if ($(obj).attr('id') != 'custom-block[0]') { frm_cnt++; $(obj) .attr('id', 'custom-block[' + frm_cnt + ']') // id属性を変更。 .find('select').each(function(idx, obj) { $(obj).attr({ id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'), name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']') }); }); } }); // option再生成 console.log('#2'); generateOptions(); console.log('#3'); }); });
問題箇所のみ抜粋(意図しない動作):
// (-)buttonがクリックされた時の処理 $(document).on('click', '.del', function(){ var removeObj = $(this).parent(); removeObj.fadeOut('fast', function() { removeObj.remove(); console.log('#1'); // 番号振り直し frm_cnt = 0; $(".custom-block[id^='custom-block']").each(function(idx, obj) { if ($(obj).attr('id') != 'custom-block[0]') { frm_cnt++; $(obj) .attr('id', 'custom-block[' + frm_cnt + ']') // id属性を変更。 .find('select').each(function(idx, obj) { $(obj).attr({ id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'), name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']') }); }); } }); }); // option再生成 console.log('#2'); generateOptions(); console.log('#3'); });
(-)ボタンをクリックした際、それぞれ #1 -> #2 -> #3 の順に実行されると思ってましたが、意図しない動作の場合、 #2 -> #3 -> #1 の順に実行されます。
プログラムは上から下に流れるものとの思い込みなのかもしれませんが、何故意図しない動作となるか理由をご教授頂けないでしょうか。
以上、よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/25 07:54 編集
2016/08/25 09:35
2016/08/25 11:26