2015-10-27 15 views
7

Tôi đã đọc nhiều trang về cách sử dụng jquery trong đường ray và vẫn không thể làm cho nó hoạt động.jquery không hoạt động trong đường ray

Tôi có đá quý 'jquery-rails' và tôi đã cài đặt. Tôi có các câu lệnh yêu cầu trong tệp application.js.

Đây là một trang thử nghiệm tôi tiếp tục chạy:

<!DOCTYPE html> 
<html> 
<head> 
<title><%= yield(:title)%></title> 
<%= javascript_include_tag 'application','jquery', 'data-turbolinks-track' => true %> 
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
<%= csrf_meta_tags %> 
<script>$(document).ready(function(){ 
    $(".bg-info").click(function(){ 
    $(this).hide(); 
}); 
});</script> 
</head> 
<body> 
<center> 
<h1 class="bg-info"><%= yield(:title)%></h1> 
</center> 
</body> 
</html> 

Nhưng khi tôi bấm vào "bg-info" text trong trình duyệt tôi không nhận được trả lời.

+0

đây là đoạn kéo dài nhưng trong 'asset/javascripts/application.js' của bạn, bạn có dòng sau:' // = require jquery'. Hoặc có thể 'bó cài đặt'? –

+0

đã làm những điều đó đã –

+0

Bạn có thể thử những điều sau đây: '<% = javascript_include_tag 'ứng dụng', 'dữ liệu-turbolinks-track' => true%>'. Xóa 'jquery' khỏi dòng đó, khởi động lại máy chủ và thử chạy –

Trả lời

5

Dưới đây là những gì bạn nên có:

#app/assets/javascripts/application.js 
//= require jquery 
//= require jquery_ujs 
//= require_tree . 

$(document).on("click", ".bg-info", function(e){ 
    $(this).hide(); 
}); 

Đây là những gì tôi muốn làm cho bố cục (để kiểm tra):

#app/views/layouts/application.html.erb 
<!DOCTYPE html> 
<html> 
    <head> 
     <title><%= yield(:title)%></title> 
     <%= javascript_include_tag 'application','jquery', 'data-turbolinks-track' => true %> 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
     <%= csrf_meta_tags %> 
    </head> 
    <body> 
     <div class="bg-info"><%= yield(:title)%></div> 
    </body> 
</html> 

Nếu ở trên không làm việc ra các hộp , bạn sẽ có thể có vấn đề với development environment (OS) của bạn - rất có thể với ExecJS.

Để khẳng định điều này, bạn sẽ cần phải debugdeveloper's console của bạn:

enter image description here

Để truy cập vào giao diện điều khiển dev, right-click > inspect element > console.

Điều này hiển thị cho bạn mọi lỗi với JS & môi trường front-end của bạn. Nếu bất kỳ lỗi nào xuất hiện, chúng có thể cho bạn biết vấn đề là gì.

Nếu không có lỗi xuất hiện, bạn nên try installing NodeJS on your system, vì điều này đảm bảo Rails có thể sử dụng tệp thi hành JS thích hợp.

+0

đầu mối giao diện điều khiển của devloper xứng đáng +1 –

Các vấn đề liên quan