Question

我有这个模态

<form id="contactModal">
<div id="mymodal2" class="" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
     <div class="modal-dialog">
           <div class="modal-content">
              <div class="modal-header">                  
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <span class="modal-title th2" id="lblModalLabel" name="lblModalLabel">Contact</span>
            </div>
            <div class="modal-body">

我想要的是每次关闭时清除模态，所以我像这样编写脚本_：

function clear() {
    $("#txtNombreCompleto").val("");
    $("#txtNombreEmpresa").val("");
    $("#exampleInputEmail2").val("");
    $("#dropOficina").val("");
    $("#txtTelefono").val("");
    $("#txtMensaje").val("");
}
$('#mymodal').on('hidden', function(){
    $.clear(this)
});

所以我在modal中的输入是这样的：

 <input type="text" class="form-control" id="txtNombreCompleto" name="txtNombreCompleto" placeholder="Nombre completo">

但是当我关闭模态时，它不运行函数，我怎么能在模态关闭时执行函数？此致

Answer 1

只需在bootstrap modal hide.bs.modal event(or hidden.bs.modal)处理程序中调用clear();或将该函数设置为回调。还要将代码放在document ready handler内，以便在加载页面后附加事件处理程序。

$(document).ready(function() {
  $('#mymodal').on('hidden', function() {
    clear()
  });
});

或获取所有形式的模态和设置值

内的所有元素

$(document).ready(function() {
  $('#mymodal').on('hidden', function() {
    $(':input', this).val('');
  });
});

Answer 2

我在我的项目中尝试了这段代码，但它没有用。所以我尝试了这个新代码

$(document).ready(function() {
    $('.modal').on('hidden.bs.modal', function(){
        $(this).find('form')[0].reset();
     });
});

关闭后清除模态字段

2 个答案: