Javascript Rails按钮单击不触发自定义JS函数

以下代码在JSFIDLE中用于隐藏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>

在我的应用程序中，我尝试：

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

我发现了几个有点相关的问题，但到目前为止没有任何效果。turbolinks这件事有什么我遗漏的吗？我有：

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

---

这是因为rails 4搭载了turbolinks gem。如果你看。上面说

Turbolinks将对页面发出Ajax请求，解析响应，并用响应的名称替换整个页面。

您需要将js代码放在application.js中，或者在application.js中需要一个新文件。要解决TurboLink问题，您有以下选项：

a。您可以将jquery代码封装在函数中，然后在页面加载时调用该函数。如果您的函数是myfunction，则可以执行以下操作：

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

b。您可以使用jquery的实时事件或“on”事件：

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

---

c。您可以使用jquery Turbolink gem，它将Rails Turbolink事件绑定到document.ready事件，这样您就可以用通常的方式编写jquery了。有关更多信息，请参阅

$（文档）。准备好嵌套这些代码。JS的关键在于它的定位。您必须确保在加载DOM元素时或加载DOM元素后调用脚本，即在

按钮\u标记下方

，require tree的目的不是要在assets/javascripts目录中包含所有的javascripts吗？另外，我已经在使用jquery turbolinks（上面的顺序错误，但将其更改为跟随jquery并没有解决这个问题）。我还需要application.js中的js文件，并在（b）中添加了您的代码，但仍然一无所获。@UserDuser关于require树，您是对的。你能从你的功能中发出警报吗？看起来它正在工作。我添加了

preventDefault（）

停止提交表单，但已将按钮更改为

键入：“button”，因此似乎可能是阻止了我实际试图让它执行的操作。
$（document）为我工作。
$(document).ready(myfunction);
$(document).on('page:load', myfunction);

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