Question

我正在使用bootstrap 3.3.2。如何从modal中删除数据？我希望模态在第一次出现时显得很新鲜。

例如像：

这样的模态

<div class="modal fade" id="pass" tabindex="-1" role="dialog" aria-labelledby="mypass" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <h4 class="modal-title text-center" id="mypass">Characteristics</h4>
                <div class="modal-body">
                    <form class='form-inline'>
                            <div class='form-group'>
                                <label for='playernumber_pass'>Player number</label>
                                <input type='text' class='form-control' id='playernumber_pass' name='playernumber_pass'/>
                            </div>
                            <label class='checbox-inline'>
                                <input type='checkbox' id='completed' name='completed'>Completed
                            </label>                            
                    </form>
                </div>
          </div>
        </div>
    </div>

再次加载时，该字段填充了以前的数据。我怎么能确定模态中的字段和其他项目是新加载的？

当模态重新加载时，以下是显示相同数据再次加载的小提琴：fiddle

我尝试了以下操作，但它不起作用：

$('#pass').on('hidden.bs.modal', function () {
   $('#pass').removeData();
})

Answer 1

您可以缓存模式的.html()并将其恢复到X.bs.modal event

var modalFreshContents = $('#pass').html();

// content of the modal will be restored when the modal is fully hidden
$('#pass').on('hidden.bs.modal', function (e) {
    $(this).html(modalFreshContents);
});

Demo

Answer 2

你可以在show event上使用模型。调用show实例方法时会立即触发此事件。如果由单击引起，则单击的元素可用作事件的relatedTarget属性。 check model events

  $('#pass').on('show.bs.modal', function () {
      $('form.form-inline')[0].reset();
  });

从模态中卸载数据

2 个答案: