'hide.bs.modal'模式事件在點擊bootstrap-datepicker時被觸發

正如你所見，這是我的第一個問題，但不是我第一次訪問到stackoverflow。所以請耐心等待，如果我做錯了什麼。'hide.bs.modal'模式事件在點擊bootstrap-datepicker時被觸發

我的問題是以下幾點：我遇到了bootstrap-datepicker在boostrap模式下的麻煩。我打開一個模式來編輯一些數據，所以我使用'show.bs.modal'事件加載模態數據。模態中的一個字段是出生日期，我使用bootstrap-datepicker。奇怪的行爲在我點擊datepicker字段時開始。它觸發了'hide.bs.modal'事件，我用這個事件清理數據（重置驗證器和表單），然後關閉模式。

我已經嘗試了一切，我到處搜索，但仍然沒有找到我做錯了什麼。請幫助我！

我使用的是引導v3.3.7和日期選擇爲引導V1.7.0

這裏顯示了問題的一個片段：

$(document).on('hide.bs.modal', '#editModal', function (e){ 
 
    alert("Why is this happening??!!!"); 
 
    $('#formEdit').data('bootstrapValidator').resetForm(); 
 
    $('#formEdit')[0].reset(); 
 
}); 
 

 
$('#fecha_nac').datepicker({ 
 
    format: 'dd-mm-yyyy', 
 
    autoclose: true, 
 
    language: 'es' 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/js/bootstrap-datepicker.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/css/bootstrap-datepicker.css" rel="stylesheet"/> 
 

 
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true" data-backdrop="static" data-keyboard="false"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h5 class="modal-title" id="editModalLabel">Ver y editar sacerdote</h5> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <form role="form" id="formEdit" action="" method="post"> 
 
     <div class="modal-body"> 
 
      <div class="container-fluid"> 
 
      <div class="row"> 
 
       <div class="form-group col-lg-4"> 
 
       <label for="legajo">Legajo</label> 
 
       <input type="text" class="form-control" id="legajo" name="legajo" placeholder="Ingrese legajo"> 
 
       </div> 
 
       <div class="form-group col-lg-4"> 
 
       <label for="apellido">Apellido</label> 
 
       <input type="text" class="form-control" id="apellido" name="apellido" placeholder="Ingrese apellido"> 
 
       </div> 
 
       <div class="form-group col-lg-4"> 
 
       <label for="nombre">Nombre</label> 
 
       <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Ingrese nombre"> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="form-group col-lg-3"> 
 
       <label for="fecha_nac">Fecha de nacimiento</label> 
 
       <input type="text" class="form-control" name="fecha_nac" id="fecha_nac" placeholder="DD-MM-AAAA"> 
 
       </div> 
 
       <div class="form-group col-lg-3"> 
 
       <label class="control-label" for="pais_nac">Pa&iacute;s de nacimiento</label> 
 
       <select name="pais_nac" class="form-control" id="pais_nac"> 
 
        
 
       </select> 
 
       </div> 
 
       <div class="form-group col-lg-3"> 
 
       <label class="control-label" for="provincia_nac">Provincia de nacimiento</label> 
 
       <select name="provincia_nac" class="form-control" id="provincia_nac"> 
 
        
 
       </select> 
 
       </div> 
 
       <div class="form-group col-lg-3"> 
 
       <label class="control-label" for="dpto_nac">Departamento de nacimiento</label> 
 
       <select name="dpto_nac" class="form-control" id="dpto_nac"> 
 
        
 
       </select> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="form-group col-lg-9"> 
 
       <label for="domicilio">Domicilio</label> 
 
       <input type="text" class="form-control" name="domicilio" id="domicilio" placeholder="Ingrese domicilio"> 
 
       </div> 
 
       <div class="form-group col-lg-3"> 
 
       <label for="cod_postal">C&oacute;digo postal</label> 
 
       <input type="text" class="form-control" name="cod_postal" id="cod_postal" placeholder="CP"> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="form-group col-lg-4"> 
 
       <label class="control-label" for="pais_dom">Pa&iacute;s</label> 
 
       <select name="pais_dom" class="form-control" id="pais_dom"> 
 
        
 
       </select> 
 
       </div> 
 
       <div class="form-group col-lg-4"> 
 
       <label class="control-label" for="provincia_dom">Provincia</label> 
 
       <select name="provincia_dom" class="form-control" id="provincia_dom"> 
 
        
 
       </select> 
 
       </div> 
 
       <div class="form-group col-lg-4"> 
 
       <label class="control-label" for="dpto_dom">Departamento</label> 
 
       <select name="dpto_dom" class="form-control" id="dpto_dom"> 
 
        
 
       </select> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="form-group col-lg-4"> 
 
       <label class="control-label" for="sexo">Sexo</label> 
 
       <select name="sexo" class="form-control" id="sexo"> 
 
       <option value="">-Seleccione sexo-</option> 
 
       <option value="M" selected>Masculino</option> 
 
       <option value="F">Femenino</option> 
 
       
 
       </select> 
 
       </div> 
 
       <div class="form-group col-lg-4"> 
 
       <label class="control-label" for="tipo_documento">Tipo documento</label> 
 
       <select name="tipo_documento" class="form-control" id="tipo_documento"> 
 
        
 
       </select> 
 
       </div> 
 
       <div class="form-group col-lg-4"> 
 
       <label class="control-label" for="nro_documento">N&uacute;mero de documento</label> 
 
       <input type="text" class="form-control" name="nro_documento" id="nro_documento" placeholder="Ingrese documento"> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="form-group col-lg-4"> 
 
       <label class="control-label" for="email">Email</label> 
 
       <input type="email" class="form-control" name="email" id="email" placeholder="[email protected]"> 
 
       </div> 
 
       <div class="form-group col-lg-4"> 
 
       <label class="control-label" for="tel_fijo">Tel&eacute;fono fijo</label> 
 
       <input type="tel_fijo" class="form-control telefono" name="tel_fijo" id="tel_fijo" placeholder="Tel&eacute;fono fijo"> 
 
       </div> 
 
       <div class="form-group col-lg-4"> 
 
       <label class="control-label" for="tel_cel">Tel&eacute;fono celular</label> 
 
       <input type="tel_cel" class="form-control telefono" name="tel_cel" id="tel_cel" placeholder="Tel&eacute;fono celular"> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="form-group col-lg-12"> 
 
       <label class="control-label" for="observaciones">Observaciones</label> 
 
       <textarea class="form-control noresize" rows="5" name="observaciones" id="observaciones"></textarea> 
 
       </div> 
 
      </div> 
 
      <input type="hidden" name="idPer" id="idPer"> 
 
      </div><!-- End div container --> 
 
     </div><!-- End div modal body --> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button> 
 
      <button type="submit" class="btn btn-primary" id="btnGuardarSacerdote">Guardar</button> 
 
     </div> 
 
     </form><!-- End form --> 
 
    </div><!-- End div modal content --> 
 
    </div><!-- End div modal dialog --> 
 
</div><!-- End modal Edit --> 
 

 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal"> 
 
    Open Modal 
 
</button>

採取一看jsfiddle

來源

2017-06-19 mauroave

參見[這裏]（https://stackoverflow.com/q/42443566/4131048）對於類似的問題（對於'show.bs.modal'），解決isssue的一種方法是檢查'e.target.id'。 – VincenzoC

模式內有日期選擇器的錯誤，請參閱此處的問題github。一種解決方法是趕上hide事件的日期選擇器，並傳播到模式停止事件：

$('#fecha_nac').datepicker({ 
     format: 'dd-mm-yyyy', 
     autoclose: true, 
     language: 'es' 
    }).on('hide', function(e) { 
    e.stopPropagation(); 
    });

更新小提琴：
JSFiddle

來源

2017-06-20 01:11:34 StaticBeagle

非常好，這解決了我的問題！ – mauroave

'hide.bs.modal'模式事件在點擊bootstrap-datepicker時被觸發

回答

相關問題