JQuery滑块更改事件未在ROR中触发

时间:2014-07-16 20:06:52

标签: javascript jquery ruby-on-rails

我在Rails ERB页面上有一个简单的JQuery滑块。我正试图在变化时发出警报,但事实并非如此。

对于它的价值,滑块确实有效。

我已将此代码放在home.html.erb中。

谁能告诉我哪里出错?

<html>
<head>
  <style media="screen" type="text/css">
  h1 {
    font-family: Helvetica, Arial;
    font-weight: bold;
    font-size: 18px;
  }
  body, p {
    font-family: Helvetica, Arial;
  }
  </style>

  <!-- Load jQuery and jQuery UI -->
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <!-- Load the jQuery UI CSS -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />


  <!-- jQuery UI Slider code -->
  <script>

  // When the browser is ready...
  $(function() {

    // Create a new jQuery UI Slider element
    // and set some default parameters.
    $( "#slider" ).slider({
      range: "min",
      value: 50,
      min: 20,
      max: 300,
      slide: function( event, ui ) {

        // While sliding, update the value in the #amount div element
        $( "#amount" ).html( ui.value );

      },
      change: function (event, data) {
        alert(data.value)
    }

    });


    // Set the initial slider amount in the #amount div element
    var value = $( "#slider" ).slider( "value" );
    $( "#amount" ).html( value );

  });

  </script>

</head>
<body>

  <!--  The div that is used as the slider container  -->
  <div id="slider" style="margin-top:100px;"></div>

  <br /><br /><br />

  <!--  The div that is used to display the slider value  -->
  <div id="amount" style="color:#777;font-size:72px;text-align:center;"></div>

</body>

0 个答案:

没有答案