Question

以下代码在jsfiddle中可以隐藏div但不在我的Rails应用程序中。在我的rails应用程序中，进行远程javascript调用以显示我打算在单击“取消”按钮时隐藏的div：

<form id="new_thing" class="new_thing" method="post" data-remote="true">
  <input></input>
  <input></input>

  <input class="btn btn-primary" type="submit" value="Submit" name="commit" id="fuck">
  <button id="thing_cancel" class="btn btn-primary" type="button" name="button">Cancel</button>

 </form>

JS：

  $("#thing_cancel").click(function () {
    $('#new_thing').hide();
  });

在我的应用中，我尝试：

<%= button_tag "Cancel", :class => "btn btn-primary", :type => "button", :id => "position_cancel" %>

单击按钮不执行任何操作。添加：remote =＆gt; true并使用link_to产生相同的结果。

在我的assets / javascripts / thing.js中使用

$('#thing_cancel').click(function(){
  event.preventDefault();
  $('#new_thing').hide();
  $('#new_thing_link').show();
});

我发现了几个有些相关的问题，但迄今为止没有任何工作。整个turbolinks事物中是否有我缺少的东西？我有：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .    
//= require jquery.turbolinks

Answer 1

它正在发生，因为rails 4带有turbolinks gem。如果你看rails guides。它说

Turbolinks will make an Ajax request for the page, parse the response, and replace the entire <body> of the page with the <body> of the response.

您需要将您的js代码放在 application.js 中，或者将新文件放在application.js 中。要解决turbolinks问题，您可以选择以下选项：

一个。您可以将jquery代码包装在函数中，然后在页面加载时调用该函数。如果你的功能是myfunction，那么你可以这样做：

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

湾您可以使用jquery的直播活动或＆＃34; on＆＃34;事件：

$(document).on("click","#thing_cancel",function(){ $('#new_thing').hide(); $('#new_thing_link').show(); });

℃。您可以使用 jquery-turbolinks gem 将Rails Turbolink事件绑定到document.ready事件，这样您就可以按照常规方式编写jQuery。有关更多信息，请参阅here

Rails按钮单击不激发自定义JS功能

1 个答案: