ブートストラップモードjsとの相互作用

Question

私の問題を解決してください！ 私は内部にフォームを持つboostrap3モーダルのページを持っています。

success: function (data) { 
      PERSON_AJAX.updatePersonsTable(data); 
      $('#custom-width-modal-person').modal('hide'); 
      $('#person-created-alert').modal('show'); 
     }, 

私も、私は上のフォームをシリアル化、変更することが私のフォームを確認してください：このモーダルで「保存」ボタンは、このように、それは成功だと、私は私のモーダルのために「隠す」イベントをトリガし、AJAX-クエリを送信しています（ "save"をクリックせずにモーダルを閉じたときに）シリアライズされたフォームと等しいかどうかをチェックし、変更を保存するかどうかをユーザに確認します。

form_serialize: function(){ 
    $("#custom-width-modal-person").on({ 
     'shown.bs.modal': function(){ 
      MODAL_BEHAVIORS.formData = $('#create-person').serialize(); 
     }, 
     'hide.bs.modal': function(e){ 
      if (MODAL_BEHAVIORS.formData !== $('#create-person').serialize()){ 
       if(confirm("Do you want to save the data?")){ 
        PERSON_AJAX.setPerson(); 
       } 
      } 
     }, 
    }); 

}, 

ここでの問題は、setPerson（）メソッドもhide.bs.modalイベントが含まれており、ユーザーは単にモーダルを閉じてデータを保存したいときに関数が二度呼び出すことです。どのようにこの相互作用を防ぐことができますか？

Answer 1

hide.bs.modalでこのチェックを行うべきではありません。 モーダル非表示のイベントハンドラemtpyを終了します。別の関数にこのロジックを置く：

function closeModal(){ 
    if (MODAL_BEHAVIORS.formData !== $('#create-person').serialize()){ 
     if(confirm("Do you want to save the data?")){ 
      PERSON_AJAX.setPerson(); 
     } 
     else{ 
      $('#custom-width-modal-person').modal('hide'); 
     } 
    } 
} 

コールcloseModal()をユーザーがX上でクリックしたときに、プレスは脱出、またはいつでも好きなときにモーダルが閉じます。