javascript - 取消时取消 Bootstrap 模式更改

Question

我有一个 Bootstrap 模式，其中有一个带有属性 contenteditable = true 的表格(表格是用 js 动态创建的)。我想设置一个简洁的功能 - 如果用户按下取消，那么表中的更改将被忽略。我知道我可以通过为不同状态编写一个函数，然后在取消时调用前一个状态来做到这一点。我只是在想有没有更快、更好、更快的方法？

我做了一些搜索，发现了一个link它有类似的问题，但方法和结果与我的有点不同，这意味着它对我不起作用。

这是我的代码 - 部分代码是爱沙尼亚语的，我认为一般来说代码对于这个问题是不必要的，但我仍然会提供:

    <div class="modal fade" id="ajamasinModal" 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" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><i class="fa fa-cog" style="font-size:20px"></i> Ajamasin</h4>
                </div>
                <div class="modal-body">
                    <div id="changeablevoor"></div>
                    <button type="button" class="btn btn-primary" onClick="muudaClick()">Change</button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div> 

Answer 1

尝试以下方法(查看内联评论):

HTML

<div class="modal fade" id="ajamasinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
          <div class="modal-content">
               //...
               <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
               </div>
          </div>
      </div>
 </div> 

JS

// Add hidden event of the modal 
$('#ajamasinModal').on('hidden.bs.modal', function (e) {
    cancelModal(); // Call the function to cancel the modal after hiding of the modal
})

// Cancel the modal
function cancelModal() {
   // Re-generate content with default values
}

有关 Bootstrap Modal 这些事件的更多信息可以在 Bootstrap 文档中找到:Bootstrap Modal Events