rails4-javascript文件需要调用两次才能工作

rails 4 - javascript files need to be called twice in order to work

本文关键字：两次 工作 文件 调用 rails4-javascript      更新时间：2024-02-09

我的application.html.erb文件中有以下javascript include标记：

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

这将向浏览器输出以下内容：

<link data-turbolinks-track="true" href="/assets/chosen.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.ui.datepicker.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/colorbox.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/conversations.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/employer_profile.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/employer_profiles.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/footer.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/freelancer_profile.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/header.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/home.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jobs.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.c2selectbox.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.jscrollpane.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/popup.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/profiles.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/projects.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/relationships.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/schedules.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.core.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/users.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/conversations.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/dynamic_forms.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/employer_profiles.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/functions.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jobs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-1.8.3.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.c2selectbox.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.carouFredSel-6.2.0-packed.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.checkbox.radio.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.colorbox-min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.jscrollpane.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.mousewheel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/modernizr.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/profiles.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/projects.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/relationships.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/schedules.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/static_pages.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/lib/abstract-chosen.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/lib/select-parser.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/chosen.jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/chosen-jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/cocoon.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>

出于某种原因，浏览器中的一些javascript（例如，下拉菜单）将无法工作，除非我还单独包含原始javascript_include_tag已经输出的javascript文件。例如，javascript将无法工作，除非除了原始的javascript_include_tag之外，我还放入：

<%= javascript_include_tag "jquery-1.8.3.min.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.checkbox.radio.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.mousewheel.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.jscrollpane.min.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.carouFredSel-6.2.0-packed.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.c2selectbox.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "modernizr.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.colorbox-min.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "functions.js", "data-turbolinks-track" => true %>

输出：

<script data-turbolinks-track="true" src="/assets/jquery-1.8.3.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.checkbox.radio.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.mousewheel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.jscrollpane.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.carouFredSel-6.2.0-packed.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.c2selectbox.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/modernizr.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.colorbox-min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/functions.js?body=1"></script>

所以我不明白为什么javascript文件需要包含两次。我几乎可以肯定这是不正确的，它们应该只包含一次，但我当时无法让js工作。我该怎么解决这个问题？

注意-有很多javascript，所以我不知道下拉菜单的确切位置，但我知道javascript本身是有效的。我几乎可以肯定这个问题与如何调用js文件有关。

在第一个include中，只有在包含jQuery UI之后才包含jQuery，这可能有助于呈现菜单。第二次加载文件后，依赖项就可用了。。。

试着按需要的顺序包含您的JavaScript，jQuery没有依赖项，而jQuery UI依赖于jQuery，所以请确保在jQuery UI之前包含jQuery，对任何其他有依赖项的JavaScript文件也要这样做，确保在它们依赖的文件之后包含它们。

或者，您可能每次都包含两个不同版本的jQuery：我在每个列表中都看到jQuery.js和jQuery-1.8.3.min.js。jquery-1.8.3.min.js出现在jquery UI之后，这对我来说似乎很糟糕。

包括gem"涡轮链接"
然后将application.js更改为

//=需要jquery
//=需要jquery_ujs
//=需要涡轮链接
//=需要jquery-1.8.3.min
//=require_tree。

并且在布局中包括这<%=javascript_include_tag"application"%>

您必须尝试这些步骤，无需在布局中调用javascript文件，然后调用application.js

相关文章：