Question

我正在玩这个帖子On click of button, append form, slide down and slide up on second click

中的一些代码

当我启动服务器并在浏览器中转到我的localhost时，javascript将无法运行。所有文本都显示正常，但javascript无效。关于这是为什么的任何想法？

script.js

 $(".enquiry-button").click(function(e) {

     e.preventDefault();
     e.stopPropagation();

     if (!$(this).parents('.cell').find('form').length) {
         $(this).closest('.cell').append(
             "<div class='enquiry-form'>" +
             "<form>" +
             "Your Email: <input type='text' name='email'>" +
             "First name: <input type='text' name='firstname'>" +
             "<br>Last name: <input type='text' name='lastname'>" +
             "<br>Contact No: <input type='text' name='lastname'>" +
             "<br>Postcode: <input type='text' name='postcode'>" +
             "<br>Optional Comment: <input type='textarea' name='comment'>" +
             "<input type='submit' value='Submit'>" +
             "</form>" +
             "</div>");


         $(this).closest('.cell').find(".enquiry-form:last").slideDown("slow");
     } else $(this).closest('.cell').find(".enquiry-form:last").slideToggle("slow");


 });

CSS

 .enquiry-form {
     display:none;
 }

home.html.erb

 <div class='cell'>
     <div class='enquiry-button'>asd</div>
 </div>
 <div class='cell'>
      <div class='enquiry-button'>asd</div>
 </div>
 <div class='cell'>
      <div class='enquiry-button'>asd</div>
 </div>

的application.js

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

Answer 1

在rails中javascripts被加载到页面的标题中，所以你的js代码在元素出现之前加载，jsfiddle中的一个例子（不起作用）将如下所示：

http://jsfiddle.net/JPUTy/17/

你能做些什么就是将你的js包装成：

$(document).ready(function() {

});

因此只有在加载整个文档后才会加载代码。有效的例子：

http://jsfiddle.net/JPUTy/18/

Answer 2

您正在使用turbolink，因此$(document).ready无法开箱即用＃39;。您可以使用jquery-turbolinks gem来使其正常工作。

Javascript无法在Rails中运行

2 个答案: