如何重新启动模式，当它被关闭并再次打开它？ [英] How to reset the bootstrap modal when it gets closed and open it fresh again?

问题描述

我在引导模式中有一个列表框和一个按钮。
当按钮被点击时，一个新的按钮在模态中的div内呈现。
当我关闭模态并重新打开它时，在模态上执行的最后一个操作（如前面呈现的按钮）仍然存在于模态中。

I have a list box in the bootstrap modal and a button. When the button is clicked a new button gets rendered inside a div in the modal. When I close the modal and reopen it, the last operation performed on the modal like the button rendered earlier is still present in the modal.

如何重置模式，以便当再次打开模式时，该按钮不存在，并且用户可以再次从列表框中选择该选项，并单击按钮以呈现新按钮等。

How do reset the modal so that when the modal is opened again, the button is not present and user can again select the option from the list box and click on the button to render a new button and so on.

        <!-- 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>

推荐答案

只需在隐藏模态时手动重置任何内容： / p>

Just reset any content manually when modal is hidden:

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

还有更多的事件。更多关于他们此处

There is more events. More about them here

$(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>

这篇关于如何重新启动模式，当它被关闭并再次打开它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！