Bootstrap 模态表单不会关闭

Question

我有一个填充了数据的表格，其中每一行都有一个编辑按钮。编辑后，将出现一个引导模式弹出表单，其中包含现在可编辑的表格行数据。这个弹出表单有一个提交按钮和一个关闭按钮。关闭按钮按预期工作（关闭模式弹出窗口），提交按钮确实更新了我的数据，但不会关闭表单。

简而言之，我的模式弹出窗口正确显示，并且弹出窗口上的提交按钮确实有效，但我无法在数据更新后关闭表单。

以下是相关部分...

index.html.erb

<tbody class="majors-index">
    <!-- This renders my table with all the data and edit buttons -->
    <%= render 'index' %>
</tbody>
....
....
<div class="modal" id="major-modal">
</div>
....

_index.html.erb

....
<!-- This opens the modal dialogue -->
<%= link_to "Edit", edit_major_path(m), remote: true, class: "btn btn-primary", data: {toggle: 'modal', target: "#major-modal"} %>
....

edit.js.erb

// display the modal form
$("#major-modal").html("<%= escape_javascript(render partial: "majors/edit") %>")
$("#major-modal").modal("toggle")

_edit.html.erb

<!-- #modal-without-animation -->
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
        <h4><%= "Editing #{@major.name}" %></h4>
    </div>
    <%= render "form"%>
  </div>
</div>

_form.html.erb

<%= form_for @major, remote: true, html: {class: "form-horizontal", style: "display-inline;"} do |f| %>
    <div class="modal-body">
    ....
    ....
    <%= f.submit "Modify", class: "btn btn-primary", id: "btnSubmit" %>
    <%= link_to "Cancel", "#", class: "btn", data: {dismiss: "modal"} %>
    ....
    </div>
<% end %>

现在，点击提交后，首先调用的是我的 update.js.erb，它应该关闭我的模态表单。

update.js.erb

$("#major-modal").html("<%= escape_javascript(render partial: "majors/edit") %>")
$("#major-modal").modal("toggle")

但无论出于何种原因，模态表单都不会关闭。我尝试将“切换”切换为“隐藏”，但这也没有效果。我知道 update.js.erb 被调用的事实，因为如果我只是在那里发出警报，它就会被解雇。

我做错了什么？为什么模态表单不会关闭？

更新：

这是我的控制器...

def update
    @majors = Major.all
    @major = Major.find(params[:id])
    @major.update_attributes(major_params)

    respond_to do |format|
      format.js
    end
  end

Answer 1

好的，所以在页面呈现之后。动态添加新元素时，不一定要将其添加到 DOM 以便于 jquery 选择。它不能关闭不存在的元素。

您可以通过委托事件解决此问题：

$('#btnSubmit').on('submit', '#major-modal', function() {
    $(this).modal('hide');
});

这是假设您将其放入文档就绪子句中，如下所示：

$(document).ready(
$('#btnSubmit').on('submit', '#major-modal', function () {
    $(this).modal('hide');
}));