如何在 Bootstrap3 modal 实现的编辑表单上恢复数据[重复]

Question

我正在开发一个项目，该项目使用 bootstrap3 来实现包含编辑表单的模式。我可以通过设置 value 属性来显示模态并将原始数据加载到每个输入字段中。问题是当我进行一些更改并单击关闭按钮以取消它时。然后再次加载此编辑表单，查看内容是上次编辑的内容，而不是原始内容。我不知道如何在单击关闭按钮时恢复它。此外，用户输入存储在哪里？ 下面是我的代码

<div class="span4">
            <div class="panel panel-primary">
                <div class="panel-heading">qawsedrftgDI</div>
                <div class="panel-body">jhyuh</div>
            </div>
            <p>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editItem2">Edit</button>
                <input type="button" class="btn btn-default" value="Delete" onclick="javascript:deleteCategoryNoneItem(2);" />
            </p>
            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="editItem2">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">Make Your Change</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" method="POST" id="existingItem2">
                                <div class="form-group">
                                    <label class="control-label col-md-2">Title</label>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" value="qawsedrftgDI" id="title2" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-2">Content</label>
                                    <div class="col-md-8">
                                        <textarea rows="10" class="form-control" id="content2">jhyuh</textarea>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" id="changeExistingItem" onclick="javascript:modifyCategoryNoneItem(2);">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

请参阅Bootstrap modals 的文档。在事件部分，您可以在模式关闭后使用“hidden.bs.modal”事件来做一些事情。所以它看起来像：

$('#myModal').on('hidden.bs.modal', function (e) {
  $(this).find('input').val('');
});

您可以在此处指定输入字段的“占位符”属性，或在事件处理程序中执行一些 javascript。