所以我按下了一个按钮来执行一些 JS。但是发生的事情是在它工作的页面的第一次加载时，但是一旦我转到另一个页面并按下该新页面上的按钮，它就不起作用了。

根据 Turbolinks 文档，这是正常的 - 所以我必须进行修改。

这部分包含在这个 RailsCast 中 - http://railscasts.com/episodes/390-turbolinks?view=asciicast - 但 Ryan 给出的解决方案是在 CoffeeScript 中，我使用的是普通的旧 vanilla JS。

这是我的posts.js文件：

$(function(){

    var toggleSidebar = $("#togglesidebar");
    var primary = $("#primary");
    var secondary = $("#secondary");

    toggleSidebar.on("click", function(){

        if(primary.hasClass("col-sm-9")){
            primary.removeClass("col-sm-9");
            primary.addClass("col-sm-12");
            secondary.css('display', 'none');
        }
        else {
            primary.removeClass("col-sm-12");
            primary.addClass("col-sm-9");
            secondary.css('display', 'inline-block');
        }
    });

});


$(document).on('page:load');

根据 RailsCasts，这是他们的建议：

ready = ->
  $('.edit_task input[type=checkbox]').click ->
    $(this).parent('form').submit()

$(document).ready(ready)
$(document).on('page:load', ready)

当我在我的底部尝试这个时posts.js：

$(document).ready();
$(document).on('page:load', ready());

我收到此错误：

Uncaught ReferenceError: ready is not defined 

关于如何获得这个的想法？我很确定它很简单，但是我几乎没有 …

该代码在您刷新页面时有效，但在原始加载时无效。

Pinterest 克隆我正在构建。Rails 应用程序 4.1.4。

.

应该发生什么

当您从索引页面单击 Pin 时，它会显示页面。
SHOW 页面有一些JavaScript可以调整图片/ DIV 的大小。

.

问题：

几乎每次我从索引页面单击 Pin 时，javascript 都不会运行（不会调整图像/div 的大小）。

但是，如果我使用 Web 浏览器单击“刷新”，脚本似乎总是运行得很好（图像/Div 的大小调整得很好）。

.

github上js链接： https : //github.com/growthcode/pinterest/blob/master/app/assets/javascripts/pins.js.coffee

在 Heroku 上尝试一下： https : //growthcode-pinterest.herokuapp.com/

.

SHOW 引脚的 html：

<div class="container">
  <div class="row">
    <div id="showPinContainer" class="col-xs-12">
      <div id="showPin" class="well">
        <%= image_tag @pin.image, class: "show-image" %>
        <p class="description"><%= @pin.description %></p>
        <p><%= @pin.user.name %></p>
        <% if current_user == @pin.user %>
        <%= link_to 'Edit', edit_pin_path(@pin) …

Facebook 像素的初始化代码和 PageView 代码建议放在版块内：https : //developers.facebook.com/docs/facebook-pixel/using-the-pixel#get

问题是网页的头部永远不会用 Rails turbolinks 重新加载。Pixel 确实在 pushState/popState 上向 Facebook 发送了 pageView 事件，但使用了错误的 URL - 页面初始加载时的 URL。我假设像素保存初始位置（调用 fbq('init') 时），然后将其重用于 PageView 事件。

我试图将整个代码段放在正文中，但结果是“Facebook Pixel Error: Duplicate Pixel ID: XXXXXXXXXX”java 脚本错误。

我试图拆分代码并将 fbq('init', XXXXX) 事件放在头部，然后在 page:change 事件上调用 fbq('track', 'PageView'); 但问题是这再次使用了初始 URL。

我还尝试将 window.fbq 变量设置为 undefined 并在 PageView 之前再次调用 init - 所有这些都在 page:change 回调中。但是后来我收到了“Facebook 像素警告：在此页面上检测到多个具有冲突版本的像素”，并且再次使用错误的 URL 调用了 PageView。

有没有人让 Facebook 像素与 turbolinks 一起工作？

我有一个 Rails 5.1 应用程序，其中使用https://www.kryogenix.org/code/browser/sorttable/中的sortable.js库来对表进行一些简单的客户端排序。

我遇到一个问题，当页面首次加载时，表排序不起作用。（它根本没有响应。）如果您随后手动重新加载页面（cmd-R 或等效命令），那么它就会起作用。

经过一番搜索，我认为问题是由 Turbolinks 引起的。像这样的帖子，以及其他人建议如何修改 JS 代码来解决它： Rails javascript 仅在重新加载后才起作用

要引用该页面上的答案，您必须通过执行以下操作告诉 Turbolinks 进行加载：

document.addEventListener("turbolinks:load", function() {
  my_func();
})

然而，我不是 JS 专家，所以有点讨厌在 sortable.js 代码中过多地胡闹。我正在寻求以侵入性最小的方式解决问题的帮助。

我正在使用来自广告服务提供商的横幅广告，类似于 google adsense。他们网站的说明清楚而简单地说明我们需要做的就是将以下代码复制到我们的网页正文中

<!-- Begin Hsoub Ads Ad Place code -->
<script type="text/javascript"><!--
  hsoub_adplace = [my account id];
  hsoub_adplace_size = '728x90';
//--></script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
<!-- End Hsoub Ads Ad Place code -->

我已复制并粘贴到我的 rails 应用程序中，在视图文件的主体内，但没有显示横幅，我可以看到 javascript 错误（使用浏览器检查源）

类型错误：document.getElementById(...) 为空

ps：在旧浏览器上会显示横幅，但不会在最新版本的浏览器上显示。

ps2：多次确认hsoub的支持，他们这边没有问题（他们的代码很好，可以在数千个网站上运行，我的帐户处于活动状态没有问题）。这一定是我的代码有问题。我在想 Rails 处理 javascript 的方式……你能帮我解决这个错误并显示横幅吗？

ps3：我正在使用导轨6.0.1和涡轮链接5.2.0

您可以在https://tafqit.com/在线检查错误/源代码

所以，我有一个 Rails 应用程序，安装了 webpacker、vue、turbolinks 和stimulus js。
我遇到的问题是，即使控制器只导入一次，即使我暂时禁用涡轮链接，该initialize()功能也会connect()被调用两次。
仅当我进行刷新时才会发生这种情况（即不是当我第一次访问该页面时，而是仅当我执行页面重新加载时）。
奇怪的是，disconnect()只被调用一次（当我离开页面时）

这很糟糕，因为我需要在初始化时修改 DOM，所以我添加了两次元素。有人知道造成这种情况的原因和/或解决方案吗？

编辑：按照要求的application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "stylesheets"
import "controllers"
import "components"

组件/index.js

import Vue from 'vue/dist/vue.esm'
import BootstrapVue from 'bootstrap-vue'
import TurbolinksAdapter from 'vue-turbolinks'

Vue.use(BootstrapVue)
Vue.use(TurbolinksAdapter)

const components = {}
const context = require.context("components", true, /_component\.vue$/)
context.keys().forEach(filename => {
  const component_name = filename.replace(/^.*[\\\/]/, '').replace(/_component\.vue$/, '')
  const component = context(filename).default
  components[component_name] = component
})

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: …

我正在使用Rails 7创建一个名为 Employee Management System 的应用程序。为了添加员工，我创建了一个表单。在这里，我使用nested-form-fields gem 来添加员工的联系人。问题是当第一次加载表单时，当我想添加或删除联系人字段时，它会重定向到同一表单。但是当我刷新页面时，它就开始工作，没有任何问题。即使添加或删除的字段也会反映在数据库中。仅在首次加载创建或更新员工页面时才会出现此问题。我发现当我单击添加员工的链接时，表单将打开。事件不会以 html 形式加载。正如我们在下图中靠近 body 标签所看到的：

但刷新后，事件被加载：

我在 gem 文件夹中看到了 js.coffee 文件，但这对于像我这样的初学者来说太高级了。那里的代码如下所示：

window.nested_form_fields or= {}

nested_form_fields.bind_nested_forms_links = () ->
  $('body').off("click", '.add_nested_fields_link')
  $('body').on 'click', '.add_nested_fields_link', (event, additional_data) ->
    $link = $(this)
    object_class = $link.data('object-class')
    association_path = $link.data('association-path')
    added_index = $(".nested_#{association_path}").length
    $.event.trigger("fields_adding.nested_form_fields",{object_class: object_class, added_index: added_index, association_path: association_path, additional_data: additional_data});
    if $link.data('scope')
      $template = $("#{$link.data('scope')} ##{association_path}_template")
    else
      $template = $("##{association_path}_template")
    target = $link.data('insert-into')

    template_html = $template.html()

    # insert association indexes
    index_placeholder = "__#{association_path}_index__"
    template_html = template_html.replace(new …

我正试图在我的Rails 4应用程序上显示一个简单的Google Map.我选择静态包含代码,直到我开始工作.在我的_head.html.erb部分中,我有:

<head>
  <title><%= content_for?(:title) ? yield(:title) : t('website.name') %></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= yield(:google_maps_api) if content_for?(:google_maps_api) %>
  <%= csrf_meta_tags %>
</head>

然后在另一个视图中,我有一个名为_google_map.html.erb的部分执行以下操作:

<% content_for(:google_maps_api) do %>
<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=xyz&sensor=false" %>
<script type="text/javascript">
    function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<% end %>

<div …

我使用Rails 4,Turbolinks和一个远程表单有一个相当奇怪的问题.我的表格看起来像:

<%= form_for [object], remote: true do |f| %>                                                   
    <td><%= f.text_field :name, class: 'form-control' %></td>                                     
    <td><%= f.email_field :email, class: 'form-control' %></td>                                   
    <td><%= f.submit button_name, class: 'btn btn-sm btn-primary' %></td>
<% end %>    

此表单添加(创建)一个新对象.但它确实不起作用:

• 当我直接使用URL或刷新加载页面时; 有用
• 当我从我的应用程序导航到此页面时; 它失败

当为此链接禁用Turbolink时,页面工作正常.

我有两个问题:

1. 为什么这不起作用？这是因为由于JQuery/Turbolinks问题,远程处理程序没有附加到按钮？
2. 我该如何解决这个问题？

提前致谢.

解

感谢@ rich-peck,解决方案是添加一个javascript,点击按钮后手动提交表单:

<%= javascript_tag do %>
  var id = "#<%= dom_id(f.object) %>";
  var inputs = $(id).parent().find('input');
  console.log(inputs);
  $(id).parent().find('button').on('click', function(e) {
    e.preventDefault();
    $(id).append(inputs.clone());
    $(id).submit();
  });
<% end %>

此代码将javascript添加到表单行,获取输入,将它们附加到ID并提交表单.preventDefault(); 防止在刷新页面并且表单实际工作时两次发送查询.

这篇文章提供了一个极好的教程，说明如何用webpack替换rails资产管道。但是，它指出您应该删除turbolinks gem。有没有办法做到这一点，但仍然使用涡轮链接？