如何清除內容-Bootstrap模式

Question

每次我打開Bootstrap Modal表單時，我都希望增加內容的負荷，而不是添加到現有表單中（默認行為）。 因此，我希望hello world在表單hello world顯示一次，而不是一直將它們彼此附加。 我在這里查找了如何執行此操作，並嘗試了所有答案，但是沒有一個對我有用。 例如， reset()會清除字段，但不會刪除它們， removeData('bs.modal')不執行任何操作， .html('')會完全刪除表單，而不僅僅是字段。 我需要一種方法來完成我想要的，每次都具有新的表單並每次都重新加載內容。

另外，您好，世界只是一個示例，實際的表單字段可能很多。 因此，我不想在函數中創建新表單，而是要清除它並僅加載某些內容。

JS

function closeForm() {
    $('#myform').removeData('bs.modal'); 
}

function loadForm() {
    $('#myform')[0].reset();

    var html = "<p>Hello world</p>";
    $("#myform").append(html);
}

的HTML

<a href="#" class="right" data-toggle="modal" data-target="#myformDiv" onclick="loadForm()">Open form</a>

<div class="modal fade" id="myformDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button onclick="closeForm()" type="button" class="close right" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="close">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form id="myform">

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

Answer 1

Bootstrap模態提供show和hidden事件。 您可以清除hidden的表單，並在show添加內容。

 $('#myformDiv').on('show.bs.modal', function() { var html = "<p>Hello world</p>"; $("#myform").append(html); }); $('#myformDiv').on('hidden.bs.modal', function() { $('#myform').empty(); console.log("modal closed and content cleared"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Code --> <a href="#" class="right" data-toggle="modal" data-target="#myformDiv">Open form</a> <div class="modal fade" id="myformDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close right" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" class="close">&times;</span> </button> </div> <div class="modal-body"> <form id="myform"> </form> </div> </div> </div> </div> 

Answer 2

一種簡單但並非最佳的方法：

1-創建一個包含所有表單字段的div標簽。給它一個ID（例如“ myFields”）並設置style="display:none"

2-模態載荷集$("#myform").html($("#myFields").html());