Ruby 在 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 file，你需要

= javascript_include_tag "my_js"

来自 here。

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

Ruby 在 Rails - Javascript/jQuery 到 Haml

Ruby on Rails - Javascript/jQuery to Haml

javascript

jquery

ruby-on-rails

ruby

haml