javascript - document.ready と ajax フォームの送信タイミング

Question

モーダルでフォームを提示し、jquery を介してフォームの送信を処理します。サーバーがフォームを返した場合、モーダルでフォームを再表示して、ユーザーにフォームエラーを表示します。フォームがサーバーで検証されると、サーバーは内部的にリダイレクトし、ユーザーに成功ページを返します。

これは、次の小さなスクリプト (簡易版) で実行されます。

function submitItemModalFormBind(url){
         //bind the form. prevent default behavior and submit form via ajax instead
         $('#ajax_form_modal_result').find(":submit").click(function(ev){
             var button = ev.target;
             var the_form = jQuery(this).parents("form");
             var data = the_form.serialize();
             data = data + "&" + button.name + "=" + button.value;

             $.ajax({
                type: "POST",
                url: url,
                data: data,
                success:function(response, textStatus, jqXHR){
                     var form = $("#ajax_form_modal_result_div", response);
                     //form is returned if it is not valid. update modal with returned form
                     //change this "if" to check for a specific return code which should be set in the view
                     if (form.html()) {
                        //update modal div
                         $('#ajax_form_modal_result_div').html(form);
                         $("#itemFormModal").modal('show');
                         //rebind the form
                         submitItemModalFormBind(url);
                      }
                      //form is not returned if form submission succeeded
                      else{
                        //update the entire document with the response received
                        document.open();
                        document.write(response);
                        document.close();
                        $("#itemFormModal").modal('hide');
                        }
                },
                error: function (request, status, error) {
                            if (request.status == 0){
                                 //status == 0 = server is unreachable or access denied
                                modalBody = $('#itemFormModal').find('.modal-body');
                                errorMessage = "<div class=\"alert alert-error\"><button class=\"close\" data-dismiss=\"alert\">x</button>Due to connection problems we could not process your request.. Please try again later. </br> ";
                                errorMessage = errorMessage + "If the problem persists check your internet connection and contact your system administrator.</div>" ;
                                modalBody.prepend(errorMessage);
                            };
                        }
                    });
                    return false;
                });
              }

これはほとんどの場合うまくいくようです。ただし、これはおそらく最善の方法ではなく、次のスクリプトと一緒に使用するとうまくいきません。

$(document).ready(function() {
              form_bind_update();
              form_bind_hide();
              $("#id_project").select2({ width: 'resolve' });
              $("#id_year").select2({ width: 'resolve' });
              $("#id_month").select2({ width: 'resolve' });
              $("#id_purchase_order_membership").select2({ width: 'resolve' });
              $("#id_action").select2({ width: 'resolve' });
            });

ドキュメントの最初の読み込みは正常に機能します。しかし、document.write() 関数を介してこのデータをロードすると、$("id_project") の選択がクラッシュします。document.write() がファイナライズされる前に document.ready() が起動されたようです。

このユースケースにより適切にアプローチする方法について何か提案はありますか?