Javascript Rails中的Bootstrap4模式表单在ajax刷新时禁用提交按钮

我在使用Bootstrap 4 alpha v6的Rails 5.1应用程序中有一个表单，当我单击“注释”按钮时，会弹出一个模式，我可以输入文本，提交注释，它会将我返回到视图并关闭模式

我每隔15秒通过ajax在视图中轮询我的部分以刷新div内容，但是在首次提交注释后，如果我等待15秒以刷新部分并尝试提交另一个注释，该模式将再次弹出，但“创建/提交”按钮不起任何作用

我认为在ajax刷新中，model以某种方式解除了绑定，但我对Bootstrap和JS还不够熟悉，无法真正快速解决这个问题。我一整天都在搜索stack和google，结果都没找到。以下是我的查看代码：

轮椅呼叫.html.erb

<div id="active">
  <%= render "assigned" %>
</div>

<div id="inactive">
  <%= render "unassigned" %>
</div>


<script>
  $(function() {
    setInterval(function(){
      $.getScript('/calls/wheelchair_calls/?region=<%= params[:region] %>')
    }, 15000);
  });
</script>

$("#active").html("<%= escape_javascript render("assigned") %>");
$("#inactive").html("<%= escape_javascript render("unassigned") %>");

<div id="assigned-note-modal<%= index %>" class="modal hide fade" data-backdrop="">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Call Notes <%= call.incident_number %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <%= form_for @call_note, url: call_notes_path, method: 'post' do |f| %>
          <%= f.hidden_field :call_id, value: call.id %>
          <%= f.hidden_field :user_id, value: current_user.id %>
          <%= f.text_area :body, size: "60x12" %>
          <%= f.button "Create", class: 'btn btn-info btn-sm' %>
        <% end %>

        <% call.call_notes.each do |cn| %>
          <li><%= cn.body %> | <%= cn.user.username %> | <%= cn.created_at.strftime("%m/%d/%Y-%H:%M") %></li>
        <% end %>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

---

由于某种原因，表单似乎正在关闭，因此未包含“提交”按钮。这在初始页面加载和ajax刷新时都会发生。

发现这是一个HTML问题，在我的视图中在外部呈现表单。所以它提前关闭了表单。将渲染的部分移到适当的div和tr标记中，它现在一直工作

<table class="table">
  <thead class="thead-default">
    <tr>
      <th>Incident #</th>
      <th>Patient</th>
      <th>Nature</th>
      <th>Origin</th>
      <th>Destination</th>
      <th>Unit Assigned</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <% @assigned.each_with_index do |call, index| %>
      <td><%= call.incident_number %></td>
      <td>John Doe</td>
      <td>Cardiac</td>
      <td>Ben Taub</td>
      <td>St Lukes</td>
      <td><%= link_to "#{call.units.map(&:name).join(", ")}", '#unit-modal', data: {toggle: "modal", target: "#unit-modal#{index}" }, class: 'btn btn-info btn-sm' %></td>
      <td><%= link_to 'Detail', '#', class: 'btn btn-primary btn-sm' %> <%= link_to 'Close', '#', class: 'btn btn-warning btn-sm' %> <%= link_to 'Cancel', '#', class: 'btn btn-danger btn-sm' %> <%= link_to "Status", '#status-modal', data: {toggle: "modal", target: "#status-modal#{index}" }, class: 'btn btn-sm btn-success' %> <%= link_to "Notes", '#assigned-note-modal', data: {toggle: "modal", target: "#assigned-note-modal#{index}" }, class: 'btn btn-sm btn-primary' %>
        <%= render 'shared/unit_modal', call: call, index: index %>
        <%= render 'shared/status_modal', call: call, index: index %>
        <%= render 'shared/assigned_note_modal', call: call, index: index %>
    </tr>

    <% end %>
  </tbody>
</table>

事故#
病人
本性
起源
目的地
分配的单位
行动
无名氏
心脏的
本陶布
圣卢克斯

有人告诉我，我需要通过jQuery或JS将事件绑定到submit按钮，但鉴于我的代码结构，我不确定如何绑定。

<form class="new_call_note" id="new_call_note" action="/call_notes" accept-charset="UTF-8" method="post"></form>

<table class="table">
  <thead class="thead-default">
    <tr>
      <th>Incident #</th>
      <th>Patient</th>
      <th>Nature</th>
      <th>Origin</th>
      <th>Destination</th>
      <th>Unit Assigned</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <% @assigned.each_with_index do |call, index| %>
      <td><%= call.incident_number %></td>
      <td>John Doe</td>
      <td>Cardiac</td>
      <td>Ben Taub</td>
      <td>St Lukes</td>
      <td><%= link_to "#{call.units.map(&:name).join(", ")}", '#unit-modal', data: {toggle: "modal", target: "#unit-modal#{index}" }, class: 'btn btn-info btn-sm' %></td>
      <td><%= link_to 'Detail', '#', class: 'btn btn-primary btn-sm' %> <%= link_to 'Close', '#', class: 'btn btn-warning btn-sm' %> <%= link_to 'Cancel', '#', class: 'btn btn-danger btn-sm' %> <%= link_to "Status", '#status-modal', data: {toggle: "modal", target: "#status-modal#{index}" }, class: 'btn btn-sm btn-success' %> <%= link_to "Notes", '#assigned-note-modal', data: {toggle: "modal", target: "#assigned-note-modal#{index}" }, class: 'btn btn-sm btn-primary' %>
        <%= render 'shared/unit_modal', call: call, index: index %>
        <%= render 'shared/status_modal', call: call, index: index %>
        <%= render 'shared/assigned_note_modal', call: call, index: index %>
    </tr>

    <% end %>
  </tbody>
</table>