如何在关闭时重置bootstrap模式并再次打开它？

Question

我在bootstrap模式中有一个列表框和一个按钮.单击该按钮时,将在模式中的div内呈现新按钮.当我关闭模态并重新打开它时,在模态上执行的最后一个操作(如前面渲染的按钮)仍然存在于模态中.

如何重置模态,以便当再次打开模态时,按钮不存在,用户可以再次从列表框中选择选项,然后单击按钮以呈现新按钮,依此类推.

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Select Language</h4>
              </div>
              <div class="modal-body">                

                <button type="button" class="btn" data-dismiss="modal">Close</button>                    
                <button type="button" class="btn" id="submit_form">Submit</button>

              <div class="modal-body1">
                <div id="placeholder-div1">
                </div>                    
              </div>

              </div>

              <div class="modal-footer">


              <script>                    
                $('#submit_form').on('click', function() {
                    $(".modal-body1").html('<h3>test</h3>');
                });                                    
              </script>

              <script>                    
                $(function(){                    
                    $('.modal-footer').click(function() {
                       $('.modal').modal('hide');        
                    });                          
                }); 
              </script>

              </div>

            </div>
          </div>
        </div>

- 更新---

为什么这不起作用？

              <script type="text/javascript">  
                $(function(){  
                      $('#myModal').on('hidden.bs.modal', function (e) {
                      console.log("Modal hidden");
                      $("#placeholder-div1").html("");
                    });
                });

              </script>

Answer 1

只需在隐藏模态时手动重置任何内容:

$(".modal").on("hidden.bs.modal", function(){
    $(".modal-body1").html("");
});

还有更多的活动.更多关于他们的信息

$(document).ready(function() {
  $(".modal").on("hidden.bs.modal", function() {
    $(".modal-body1").html("Where did he go?!?!?!");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class='modal-body1'>
          <h3>Close and open, I will be gone!</h3>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 2

对我有帮助的是将以下行放在ready函数中:

$(document).ready(function()
{
    ..
    ...

    // codes works on all bootstrap modal windows in application
    $('.modal').on('hidden.bs.modal', function(e)
    { 
        $(this).removeData();
    }) ;

    ...
    ..
});

关闭模态窗口并再次打开时,先前输入和选择的值将重置为初始值.

我希望这对你也有帮助!

Answer 3

尝试克隆,然后在隐藏模态时删除并重新添加元素.这应该保留所有事件,尽管我还没有对所有版本的所有版本进行全面测试.

var originalModal = $('#myModal').clone();
$(document).on('#myModal', 'hidden.bs.modal', function () {
    $('#myModal').remove();
    var myClone = originalModal.clone();
    $('body').append(myClone);
});

Answer 4

试过了并且运作良好

$('#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 5

要重置模态中的所有输入字段,请使用以下命令.

$(".modal-body input").val("")