2015-10-27 10 views
7

Ich habe viele Seiten über die Verwendung von JQuery in Schienen gelesen und kann immer noch nicht scheinen, um es zur Arbeit zu bringen.jquery funktioniert nicht in Schienen

Ich habe die "Jquery-Schienen" Juwel, und ich habe installiert. Ich habe die erforderlichen Anweisungen in der Datei application.js.

Hier ist eine Testseite I laufen halten:

<!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> 

Aber wenn ich auf dem "bg-info" Text im Browser klicken erhalte ich keine Antwort.

+0

Dies ist eine Strecke, aber in Ihrer 'Vermögenswerte/Javascripts/application.js', haben Sie die folgende Zeile:' // = erfordern jquery'. Oder vielleicht 'Bündel installieren'? –

+0

haben die schon getan –

+0

Können Sie folgendes versuchen: '<% = javascript_include_tag 'application', 'data-turbolinks-track' => true%>'. Entfernen Sie 'jquery' von dieser Zeile, starten Sie den Server neu und versuchen Sie, –

Antwort

5

Hier ist, was Sie sollte haben:

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

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

Hier ist, was ich für das Layout (zum Test) tun würde:

#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> 

Wenn die oben nicht die Box nicht klappt Sie werden wahrscheinlich haben ein Problem mit Ihrem development environment (OS) - am ehesten mit ExecJS.

enter image description here

Um die Entwickler-Konsole zuzugreifen, right-click > inspect element > console:

Um dies zu bestätigen, werden Sie Ihre developer's console-debug benötigen.

Dies zeigt Ihnen Fehler mit Ihrer JS & Ihrer Front-End-Umgebung. Wenn Fehler auftreten, können sie Ihnen sagen, was das Problem ist.

Wenn keine Fehler auftreten, sollten Sie try installing NodeJS on your system, da dies gewährleistet, dass Rails die entsprechende ausführbare JS-Datei verwenden kann.

+0

devloper's Konsolenschlüssel verdient +1 –

Verwandte Themen