我有一个 Rails 5.1 应用程序，我在其中使用 Ajax 在使用 coffeescript/JS 的表单内创建患者记录。使用以下代码可以正常工作:

_form.html.erb

<div class="modal fade patient-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="mySmallModalLabel">Add Patient</h4>
      </div>
      <div class="modal-body">
        <%= form_for Patient.new do |f| %>
          <div class="form-group">
            <%= f.label :first_name %>
            <%= f.text_field :first_name, class: "form-control" %>
            <%= f.label :last_name %>
            <%= f.text_field :last_name, class: "form-control" %>
            <%= f.label :date_of_birth %>
            <%= f.text_field :date_of_birth, class: "form-control", id: 'patient_dob_modal', placeholder: 'yyyy-mm-dd' %>
            <%= f.label :age %>
            <%= f.text_field :age, class: "form-control", id: 'patient_age_modal' %>
            <%= f.label :sex %>
            <%= f.text_field :sex %>
          </div>
          <div class="form-group">
            <%= f.submit class: "btn btn-sm btn-primary" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

application.js

$(document).on('turbolinks:load', function() {
  $('#patient_date_of_birth_modal').datepicker({
    format: 'yyyy-mm-dd',
    zIndexOffset: 100000,
    forceParse: false
  });
});

患者.咖啡

$(document).on 'turbolinks:load', ->
  selectizeCallback = null
  $('.patient-modal').on 'hide.bs.modal', (e) ->
    if selectizeCallback != null
      selectizeCallback()
      selectizeCallback = null
    $('#new_patient').trigger 'reset'
    $.rails.enableFormElements $('#new_patient')
    return
  $('#new_patient').on 'submit', (e) ->
    e.preventDefault()
    $.ajax
      method: 'POST'
      url: $(this).attr('action')
      data: $(this).serialize()
      success: (response) ->
        selectizeCallback
          value: response.id
          text: response.first_name
        selectizeCallback = null
        $('.patient-modal').modal 'toggle'
        return
    return
  $('.patient').selectize create: (input, callback) ->
    selectizeCallback = callback
    $('.patient-modal').modal()
    $('#patient_first_name').val input
    return
  return

在患者模式中，我使用 bootstrap-datepicker 选择出生日期，然后我编写了一些 coffeescript 来计算年龄并自动填充它，如下面的代码所示 patients.coffee

$(document).on 'turbolinks:load', ->
  getAge = (dateString) ->
    today = new Date
    birthDate = new Date(dateString)
    age = today.getFullYear() - birthDate.getFullYear()
    m = today.getMonth() - birthDate.getMonth()
    if m < 0 or m == 0 and today.getDate() < birthDate.getDate()
      age--
    age

  $('#patient_dob_modal').on 'change', ->
    date = $(this).val()
    age = getAge(date)
    $('#patient_age_modal').val age
    return
  return

当我去添加一个病人并且模式触发/出现时，我可以填写姓名等字段，但是当我使用日期选择器选择出生日期并让 coffeescript 计算年龄时，它将显示在字段中直到我关闭 bootstrap-datepicker，然后它将清除整个模态表单，包括名字和姓氏。

当我检查时，我在控制台中没有看到任何错误，而且我确实看到 coffeescript 正在正确执行。

老实说，我不确定这有什么问题，因为我不像 Ruby 那样精通 Javascript/coffeescript。我想知道是不是我做错了什么导致输入字段在我的回调中的某处或在计算本身中被清除。

如有任何帮助，我们将不胜感激。我用谷歌搜索并搜索了堆栈，发现了一些关于在模态内执行 JS 的文章，但尚未成功实现这一小块功能。

更新 我禁用了 bootstrap-datepicker，只是手动输入出生日期字段和计算的 coffeescript，而没有清除整个表单。所以它看起来像是 bootstrap-datepicker 的一些问题。但我不确定问题出在哪里。

最佳答案

在 Stack 之外寻求帮助后，我被指向了 https://github.com/uxsolutions/bootstrap-datepicker/issues/50#issuecomment-90855951

所以我把我的代码改成这样:

$(document).on('turbolinks:load', function() {
  $('#patient_date_of_birth_modal').datepicker({
    format: 'yyyy-mm-dd'
  }).on('hide', function(event) {
    event.preventDefault();
    event.stopPropagation();
  });
});

感谢 Jacob M. 提供一双额外的 Google 眼睛。

关于javascript - Rails 在 Bootstrap 4 模态中执行 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46634573/