javascript - Ruby on Rails - Javascript/jQuery 到 Haml

Question

我正在尝试在我的 Ruby on Rails 应用程序中实现此功能。唯一不起作用的是 Javascript 代码。我已经尝试过 %script 和 :javascript。但由于某种原因它无法加载。当我将鼠标悬停在单选按钮上时，它不显示任何内容。

Javascript/jQuery(来自 jsfiddle):

$(document).ready(function(){

$('#container').on('mouseenter', '#radiobtn', showBox);
$('#container').on('mouseleave', '#radiobtn', hideBox);

function showBox(e){
    var x = e.pageX + 20;
    var y = e.pageY + 20;
$('#hoverbox').fadeIn();
$('#hoverbox').offset({ left: x, top: y });
}
});

function hideBox(){
$('#hoverbox').fadeOut();
}

示例:http://jsfiddle.net/wrN2u/387/

自己的Javascript文件:

:javascript
 $(document).ready(function(){
  $('#container1').on('mouseenter', '#radiobtn', showBox);
  $('#container1').on('mouseleave', '#radiobtn', hideBox);

  function showBox(e){
    var x = e.pageX + 20;
    var y = e.pageY + 20;
    $('#hoverbox').fadeIn();
    $('#hoverbox').offset({ left: x, top: y });
  }
 });

function hideBox(){
$('#hoverbox').fadeOut();
}

HAML:

!!!
 %html
  %head
   = javascript_include_tag 'options.js'

    #container1
      %input{:name => "optradio", :type => "radio", :id => "radiobtn"}option1
      #hoverbox
    #container2
      %input{:name => "optradio", :type => "radio", :id => "radiobtn"}option2
      #hoverbox2

Answer 1

This question可能对你有帮助。我还注意到你的 js-fiddle 中的 Javascript 没有缩进。如果您使用 HAML，那么缩进至关重要。确保您的 JS 从 :javascript

之后第二行的第一个缩进处开始

:javascript
  $(document).ready( function() {
    alert('working');
  } );

或者。如果您尝试使用 HAML 包含 js 文件，您将需要

= javascript_include_tag "my_js"

来自 here .

此外，如果这没有帮助。查看您的 HAML 文件将会非常有帮助。