如何清除内容-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());