尽管尝试了一切，Rails 4 Bootstrap 模态 JavaScript 仍无法正常工作

Question

我知道还有很多其他类似的帖子，但我已经浏览了很多，但仍然没有找到适合我的解决方案。

我有一个我想要打开的模式，我需要在它显示给用户之前使用 JavaScript 对其进行修改。通常，将链接设置为单击以调用 JavaScript 函数以执行我的操作并打开模式是一件简单的事情。但是，无论我尝试什么，它都不会打开模式，我只是得到

Uncaught TypeError: $(...).modal is not a function
at open_report_legs_modal (pilot_actions.self-ef0bb7d….js?body=1:2)
at HTMLAnchorElement.onclick (VM315 2:252)

我也尝试使用普通数据目标和诸如此类的东西打开模式，然后使用 JavaScript 在 show.bs.modal 上执行，但这也不起作用，它只是没有被触发。

我的代码

Gem 文件条目

gem 'rails', '4.2.6'
gem 'mysql2'
gem 'pg'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'autoprefixer-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'carmen-rails', '~> 1.0.0'
gem 'bootstrap_form'
gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'

application.js 需要部分（其中没有其他相关代码，只是一些用于突出显示活动导航栏链接和初始化数据表的东西）

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require_tree .

pilot_actions.js

function open_report_legs_modal(tourID, legID){
    $("#ReportLegModal").modal('show');
}

模态（pilot_actions/_report_leg.html.erb）

<div class="modal fade" id="ReportLegModal" tabindex="-1" role="dialog" aria-labelledby="ReportLegModalLabel" aria-hidden="true">
  <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="ReportLegModalLabel">Report Leg</h4>
      </div>
      <div class="modal-body">
        <%= bootstrap_form_tag  url: pilot_actions_submit_tour_report_path do |f| %>

            <%= f.collection_select :tour, Tour.all, :id, :tour_name, {}, {class: 'disabled'}%>

            <div class="form-group">
              <label class="control-label col-md-2" for="subject">Subject</label>

              <div class="col-md-8">
                <%= f.text_field :subject, placeholder: 'Enter the subject', class:'form-control', hide_label: true%>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2" for="message">Message</label>

              <div class="col-sm-8">
                <%= f.text_area :message, placeholder: 'Enter message', class:'form-control', hide_label: true%>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-6 col-md-offset-2">
                <%= f.submit 'Send', class: 'btn btn-primary' %>
              </div>
            </div>
        <% end %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

调用javascript的按钮

<%= link_to '#', onclick: "open_report_legs_modal(#{@tour.id}, #{leg.id});" do %><% image_tag 'admin_images/validate.png', size:'25'%><% end%>

最后，模态被包含在与使用按钮相同的页面上

<%= render 'pilot_actions/report_leg' %>

我不知道为什么会这样。

除了当前的设置，我尝试过使用 //=require bootstrap 和 //=require bootstrap/modal，我尝试过不使用 bootstrap sass 并且只包含正常的 bootstrap 文件，我也尝试过使用引导 CDN，没有任何效果。

Answer 1

终于找到问题了。

显然，当我第一次创建应用程序时，我为 JQuery Datatables 添加了一个脚本链接，其中包括它自己的 JQuery 副本，这破坏了一切。