从模态卸载数据

Unloading data from a modal

本文关键字：数据 卸载 模态      更新时间：2023-09-26

我正在使用引导程序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被再次加载：fiddle

我尝试了以下操作，但没有成功：

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

您可以缓存模态的.html()并在X.bs.modal事件上恢复它

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);
});

演示

您可以在show事件中使用模型。调用show实例方法时，此事件会立即激发。如果是由单击引起的，则单击的元素可用作事件的relatedTarget属性。检查模型事件

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