如何在单击数据关闭按钮时清除引导模式中的所有输入字段？

Question

单击数据关闭按钮时如何清除Bootstrap V3模式中的所有输入字段？

Answer 1

http://getbootstrap.com/javascript/#modals显示隐藏模态的事件.只需了解一下:

$('#modal1').on('hidden.bs.modal', function (e) {
  $(this)
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})

http://jsfiddle.net/5LCSU/

我建议上面的内容,因为它将清除绑定到模态本身而不是关闭按钮,但我意识到这并不能解决您的具体问题.您可以使用绑定到关闭按钮的相同清除逻辑:

$('[data-dismiss=modal]').on('click', function (e) {
    var $t = $(this),
        target = $t[0].href || $t.data("target") || $t.parents('.modal') || [];

  $(target)
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})

http://jsfiddle.net/jFyH2/

Answer 2

有一种更简单美观的方式:

$('#MyModal').on('hidden.bs.modal', function () {
    $(this).find('form').trigger('reset');
})

reset 是dom内置功能,你也可以使用 $(this).find('form')[0].reset();

Bootstrap的模态类公开了一些事件,用于挂钩到模态功能,详见此处.

hide.bs.modal 调用hide实例方法时会立即触发此事件.

hidden.bs.modal 当模态完成对用户的隐藏时将触发此事件(将等待CSS转换完成)​​.

Answer 3

如果您在模态中使用表单，则可以使用

$("#form_id").trigger("reset");