Bootstrap Modal funktioniert nicht auf Loop-Szenarien

Question

Ich versuche generalisierte Methode für Ajax in meinem Javascript zu erstellen und Bootstrap-Modal funktioniert nicht wie erwartet.

HTML:

<div class="modal fade" id="consult_modal_v2" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div style="background-color: #dc3d3e;color: #fff;height:85px !important;;" class="modal-header"> 
       <div> 
        <div class="row"> 
         <div class="col-md-11"> 
          <h4 id="message_v2" style="text-align:center;margin-top: 10px;"></h4> 
         </div> 
        </div> 
       </div> 
       <button id="con_close1_v2" type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button> 
      </div> 
      <div class="container"></div> 
      <div class="modal-body"> 

       <div class="col-md-12" style="margin-top:3%;margin-bottom:2%;"> 

        <div class="col-md-3" id="con_uname_v2" style="margin-top:11px">Admin Username</div> 
        <div class="col-md-9"><input type="text" id="con_sect_name_v2" class="form-control"></div> 
        <div class="col-md-3" id="con_pass_v2" style="margin-top:11px">Admin Password</div> 
        <div class="col-md-9"><input type="password" id="con_sect_pass_v2" class="form-control"></div> 

       </div> 

      </div> 
      <div style="border:none;" class="modal-footer" > 
       <button class="btn btn-default" id="con_close_v2" style="margin-top:3%;">Cancel</button> 
       <button class="btn btn-default" id="con_sect_ok_v2" style="margin-right:2%;margin-top:3%;">Override</button> 
       <button class="btn btn-default" id="con_upd_sect_ok_v2" style="display:none;margin-right:2%;margin-top:3%;">Override</button> 

      </div> 
     </div> 
    </div> 
</div> 

JavaScript:

Ausgeführt als

generalised_ajax('post_url', 
    { 
     'sub_id': sub_id, 
     'status': status, 
     '_token': csrf_token 
    }, "POST", function() { 
     console.log('success placing apt'); 
    }, {}, 
    function() { 
     console.log('apt cancelled'); 
    }, {}); 

function generalised_ajax(url, data, type, post_success, post_success_params, post_cancel, post_cancel_params) { 
    $.ajax({ 
     url: url, 
     data: data, 
     type: type, 
     headers: {Accept: "application/json"}, 
     dataType: 'json', 
     success: function (result, status, xhr) { 
      post_success(post_success_params); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      if (xhr.responseJSON.type === "confirmation") { 
       responseProcess = xhr.responseJSON; 
       generalised_confirm(responseProcess.message, { 
        url: url, 
        data: data, 
        type: type, 
        post_success: post_success, 
        post_success_params: post_success_params, 
        post_cancel: post_cancel, 
        post_cancel_params: post_cancel_params 
       }, responseProcess.config_name); 
      } else if(xhr.responseJSON.type === "admin_auth"){ 
       generalised_authentication(responseProcess.message, { 
        url: url, 
        data: data, 
        type: type, 
        post_success: post_success, 
        post_success_params: post_success_params, 
        post_cancel: post_cancel, 
        post_cancel_params: post_cancel_params 
       }); 
      } 
     } 
    }); 
} 

function generalised_confirm(message, data, config_name) { 
    var r = confirm(message); 
    if (r === true) { 
     data.data[config_name] = true; 
     generalised_ajax(data.url, data.data, data.type, data.post_success, data.post_success_params, data.post_cancel, data.post_cancel_params); 
    } else { 
     data.post_cancel(data.post_cancel_params); 
    } 
} 

var modelX = $("#consult_modal_v2"); 
function generalised_authentication(message, data){ 
    var uname = $("#con_sect_name_v2"); 
    var pass = $("#con_sect_pass_v2"); 
    $("#message_v2").val(message); 
    modelX.modal('toggle'); 
    $("#con_sect_ok_v2").click(function(event){ 
     modelX.modal('toggle'); 
     data.data['a_uname'] = uname.val(); 
     data.data['a_pswd'] = pass.val(); 
     uname.val(''); 
     pass.val(''); 
     generalised_ajax(data.url, data.data, data.type, data.post_success, data.post_success_params, data.post_cancel, data.post_cancel_params); 
    }); 
    $("#con_close_v2").click(function(event){ 
     modelX.modal('toggle'); 
     data.post_cancel(data.post_cancel_params); 
    }); 
} 

Erwartete Szenarien:

1. Sent ajax
2. Server reagiert mit admin_auth Fehler
3. Öffnen modalen
4. Eingangs Admin creds (falschen)
5. Schließen modal
6. Sent Ajax
7. Server mit admin_auth Fehler reagiert
8. Wiederholen von Stufe 3

Wie es jetzt funktioniert

1. Sent Ajax
2. Server mit admin_auth Fehler
3. Öffnen modalen reagierte
4. Eingangs Admin creds (falschen)
5. Schließen modal
6. Sent Ajax

Jetzt Server mit dem gleichen Ajax reagierte wie Punkt 2. Aber Modal wird nicht wieder geöffnet. Es funktioniert gut mit Javascripts Bestätigung Popup.

Update:

Nachdem ich verblassen Klasse von modalen entfernt, begann es jedes Mal erscheinen. Aber jetzt sendet es doppelte Ajax des vorherigen Versuchs. Wie zum ersten Mal einmal, zum zweiten Mal zweimal, zum dritten Mal 4 Mal, zum vierten Mal 8 Mal und so weiter.

Answer 1

Ich weiß nicht, was der Grund für dieses Verhalten ist aber

$("#con_sect_ok_v2").click(function(event){ 
     modelX.modal('toggle'); 
     data.data['a_uname'] = uname.val(); 
     data.data['a_pswd'] = pass.val(); 
     uname.val(''); 
     pass.val(''); 
     generalised_ajax(data.url, data.data, data.type, data.post_success, data.post_success_params, data.post_cancel, data.post_cancel_params); 
    }); 

zu

$("#con_sect_ok_v2").one('click',function(event){ 
     modelX.modal('toggle'); 
     data.data['a_uname'] = uname.val(); 
     data.data['a_pswd'] = pass.val(); 
     uname.val(''); 
     pass.val(''); 
     generalised_ajax(data.url, data.data, data.type, data.post_success, data.post_success_params, data.post_cancel, data.post_cancel_params); 
    }); 

es gelöst zu verändern.

Credits https://stackoverflow.com/a/3393694/2598994