Javascript 如何使此JS Turbolinks友好？

这是我的

main.js

文件：

jQuery(function($) {
  $('LI.tree-item-name').has('ul').click(function() {
    if ($(this).hasClass('opened')) {
      $(this).find('UL').slideUp();
      $(this).removeClass('opened');
    } else {
      $(this).find('UL').slideDown();
      $(this).addClass('opened');
    }
    return false;
  });

  $('LI.tree-item-name li').click(function(e) {
    e.stopPropagation();
  })
});

jQuery(window).load(function(){
    jQuery('#video').removeClass('loading');
    jQuery('#video .box').animate({'opacity' : '1'});
    var $container = jQuery('#video');
    $container.masonry({
        columnWidth: 299,
        itemSelector: '.box'
    });
    jQuery('.popupbox').click(function(){
        jQuery('.popup:visible').fadeOut();
        var id = '#'+jQuery(this).data('popup');
        jQuery('#overlay').fadeIn();
        jQuery(id).css('top', jQuery(window).height()/2 - jQuery(id).height()/2).fadeIn();
        return false;
    });
    jQuery('.profile_popupbox').click(function(){
        jQuery('.popup:visible').fadeOut();
        var id = '#'+jQuery(this).data('popup');
        jQuery('#overlay').fadeIn();
        jQuery(id).css({'top': "20px", 'left': "-200px"}).fadeIn();             
        return false;
    });
    jQuery('#overlay').click(function(){
        jQuery('.popup:visible').fadeOut();
        jQuery(this).fadeOut();
    });
});

我希望这是涡轮链接友好

我试着做：

var ready;
ready = jQuery(window).load(function(){
    jQuery('#video').removeClass('loading');
    jQuery('#video .box').animate({'opacity' : '1'});
    var $container = jQuery('#video');
    $container.masonry({
        columnWidth: 299,
        itemSelector: '.box'
    });
    jQuery('.popupbox').click(function(){
        jQuery('.popup:visible').fadeOut();
        var id = '#'+jQuery(this).data('popup');
        jQuery('#overlay').fadeIn();
        jQuery(id).css('top', jQuery(window).height()/2 - jQuery(id).height()/2).fadeIn();
        return false;
    });
    jQuery('.profile_popupbox').click(function(){
        jQuery('.popup:visible').fadeOut();
        var id = '#'+jQuery(this).data('popup');
        jQuery('#overlay').fadeIn();
        // jQuery(id).css('top', jQuery(window).height() - jQuery(id).height()/2).fadeIn();
        jQuery(id).css({'top': "20px", 'left': "-200px"}).fadeIn();             
        return false;
    });
    jQuery('#overlay').click(function(){
        jQuery('.popup:visible').fadeOut();
        jQuery(this).fadeOut();
    });
});

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

这不起作用，也不能使两个函数都友好

所以我想让整个文件变得友好

编辑1

我还有一个

upload.js.erb

，在初始页面加载后不会执行：

$("#myVCModal").html("<%= escape_javascript(render 'videos/upload_video') %>");
$("#myModal").html("<%= escape_javascript(render 'videos/upload_video') %>");

$("#add-video-step-1").html("<%= escape_javascript(render 'videos/upload_video') %>");
$("#video-comment").html("<%= escape_javascript(render 'videos/upload_video') %>");
$('myModalPL').modal(show);

Ladda.bind('button');

这是触发的模式：

<div id="overlay">&nbsp;</div>
<div class="popup" id="add-video-step-1">
  <div class="titles clearfix">
      <h2>Upload a Video</h2>
      <p><i>Step 1 of 2 - TEST</i></p>
  </div>
  <div class="content">
    <% if @family_tree %>
      <%= simple_form_for([@family_tree, @video], :remote => true) do |f| %>
        <div class="column">
              <div class="f-row">
                  <%= f.input :title, label: "Title:" %>
              </div>
              <div class="f-row">
                  <%= f.input :description,label: "Description:" %>
              </div>
              <div class="f-row">
                  <%= f.input :circa, as: :datepicker, start_year: Date.today.year - 5, label: "Circa:" %>
              </div>
              <div class="f-row">
                  <label for="family">Family in this video:</label>
                  <%= f.collection_select :user_ids, @family_tree.members.order(:first_name), :id, :first_name, {}, {multiple: true} %>
              </div>
          </div>
          <%= f.button :submit, "Add Video" %>
        <% end %>
      <% end %>
    </div> <!-- //content -->
</div> <!-- //popup -->

值得一提的是，即使它成功地处理完这个

GET”/“

请求，它实际上也不会重新加载/重定向浏览器。它只是停留在模态上

JS控制台中的错误显示：

Failed to load resource: net::ERR_CACHE_MISS 

这是

VideoController#Create

  def create
    authorize! :read, @family_tree
    @video = Video.new(video_params)

    respond_to do |format|
      if @video.save
        format.html { redirect_to root_path }
        format.json { render action: 'show', status: :created, location: @video }
      else
        format.html { render action: 'new' }
        format.json { render json: @video.errors, status: :unprocessable_entity }
      end
    end

---

将main.js更改为这种方式（我更喜欢这种方式，因为在jQuery中调试问题非常容易，而不会迷失在方法网中，并且它在TurboLink中工作得非常好，而不会添加gem）：

现在，如果您可以轻松调试上述代码以查看哪个部分正在工作/不工作，例如：

$(document).on("page:change", function(){
  MainJS.init();
  console.log('MainJS.init() was called successfully);
});

或：

等等。你明白了吧

---

关于你的upload.js.erb问题，我不确定那里出了什么问题，因为它应该会起作用（同样的事情对我也适用），但是，你可以将你的代码包装成：

$（文档）{

查看它是否有效，但我怀疑这不是问题所在。

您尝试过使用吗？它会带回默认事件。是的。我正在使用它。但是我仍然对这段代码有问题。特别是当我单击许多页面并返回主页时，这一行在应该执行时不会执行：

jQuery（“#video.box”）.animate（{'opacity'：'1'}）；

-所以我想象整个函数没有被执行。那么到底发生了什么？第二个模式是否弹出？您是否看到任何JavaScript/jQuery错误或rails服务器日志中的任何错误？@User089247您是对的，第二个模式没有弹出。没有JS或jQuery错误，服务器日志中也没有错误。发生的只是这些它正在将记录保存到数据库中，并重定向到根路径。我将用服务器日志更新问题。@User089247，所以我错了。似乎有JS错误。我用服务器日志和JS错误更新了问题。谢谢。如果您回答了，这是否意味着我不需要

jQuery.turbolinks

gem？我只是问，因为我正在使用它。老实说，我从来没有在我的Rails 4应用程序中使用过jquery turbolinks gem。我使用的方法与我在回答中介绍的方法相同，我不确定你使用它的目的是什么，但为了更安全，你可以将它保留在你的应用程序中，稍后删除它，看看当一切正常并提交时是否对它有任何依赖性在您的远程git repo上。啊，好的。这很有意义。您删除了一段JS代码，这是它的顶部：

$（'LI.tree item name'）。有（'ul'）。单击（function（）{

。我如何将该部分转换为这种新结构？抱歉…JS noob:|很好…此更新确实有效。只是

upload.JS.erb

问题。我将其包装在

文档中。第页：更改

，但这不起作用。我的

应用程序.JS

中应该有什么？我不确定upload.JS.erb有什么问题。我看不到他的代码：

$（'myModalPL'）.modal（show）；

你确定它正确吗？不应该是

或

？类似于：

$（'myModalPL'）.modal（show）；

？

Failed to load resource: net::ERR_CACHE_MISS 

  def create
    authorize! :read, @family_tree
    @video = Video.new(video_params)

    respond_to do |format|
      if @video.save
        format.html { redirect_to root_path }
        format.json { render action: 'show', status: :created, location: @video }
      else
        format.html { render action: 'new' }
        format.json { render json: @video.errors, status: :unprocessable_entity }
      end
    end

$(document).on("page:change", function(){
  MainJS.init();
});

MainJS = {
  init: function() {
    MainJS.initializePage();
    $('.popupbox').on('click', MainJS.popupBox);
    $('.profile_popupbox').on('click', MainJS.profilePopupbox);
    $('#overlay').on('click', MainJS.overLay);
    $('LI.tree-item-name').has('ul').on('click', MainJS.treeItemName);

    $('LI.tree-item-name li').on('click', function(ev) {
      ev.stopPropagation();
    });
  },

  initializePage: function(){
    $('#video').removeClass('loading');
    $('#video .box').animate({'opacity' : '1'});
    var $container = $('#video');
    $container.masonry({
      columnWidth: 299,
      itemSelector: '.box'
    });
  },

  popupBox: function(){
    $('.popup:visible').fadeOut();
    var id = '#'+$(this).data('popup');
    $('#overlay').fadeIn();
    $(id).css('top', $(window).height()/2 - $(id).height()/2).fadeIn();
    return false;
  },

  profilePopupbox: function(){
    $('.popup:visible').fadeOut();
    var id = '#'+$(this).data('popup');
    $('#overlay').fadeIn();
    // $(id).css('top', $(window).height() - $(id).height()/2).fadeIn();
    $(id).css({'top': "20px", 'left': "-200px"}).fadeIn();             
    return false;
  },

  overLay: function(){
    $('.popup:visible').fadeOut();
    $(this).fadeOut();
  },

  treeItemName: function(){
    if ($(this).hasClass('opened')) {
      $(this).find('UL').slideUp();
      $(this).removeClass('opened');
    } else {
      $(this).find('UL').slideDown();
      $(this).addClass('opened');
    }
    return false;
  }
}

$(document).on("page:change", function(){
  MainJS.init();
  console.log('MainJS.init() was called successfully);
});

MainJS = {
  init: function() {
    MainJS.initializePage();
    $('.popupbox').on('click', MainJS.popupBox);
    $('.profile_popupbox').on('click', MainJS.profilePopupbox);
    $('#overlay').on('click', MainJS.overLay);
    console.log('MainJS initialization was successful.');
  },