2013-03-19 35 views
10

ユーザーがスライダーをスライドしてスライドが停止したときに値が変更されたときにイベントを発生しようとしています。 jQueryドキュメントによれば、changeイベントがこのケースには理想的です。だから私はこれをしようとしています:しかし値が変更されていなくてもjQuery UIスライダーの「変更」イベントが発生します

<!doctype html> 
    <html lang="en"> 
     <head> 
      <meta charset="utf-8" /> 
      <title>jQuery UI Slider - Default functionality</title> 
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
      <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
      <link rel="stylesheet" href="/resources/demos/style.css" /> 
      <script> 
       $(function() { 
        $("#slider").slider({ 
         change:function() { alert("foo"); } 
        }); 
       }); 
      </script> 
     </head> 
     <body> 
      <div id="slider"></div> 
     </body> 
    </html> 

、私が観察している私は、(ページの読み込み時のスライダの初期位置を)スライダを右にドラッグして、もう一度原点に戻って、それをドラッグすると警告はまだ発火する。これはjQueryのバグですか?いいえ、どうすれば修正できますか?

+1

意図したとおりに動作します。スライダが値を変更するたびにイベントを変更します。スライダの値が最初に変更されたときにスライダの値が新しい値に変更されたため、スライダを元に戻すと再び値が変更されます。 – Populus

+0

いいえ、私はこれを意味します:右にドラッグすると、それを解除せずに元の位置(0)に戻ります。これでイベントが完了し、ドラッグが開始されたときの位置に戻ります。それでは、どうやってこれが「変更」イベントですか? – SexyBeast

+0

Change()はおそらく、スライダのIDではなく、スライダのパネルの位置をトリガします。 – isherwood

答えて

16
$(function() { 
    $("#slider").slider(); 

    var startPos = $("#slider").slider("value");, 
     endPos = ''; 

    $("#slider").on("slidestop", function(event, ui) { 
     endPos = ui.value; 

     if (startPos != endPos) { 
      // do stuff 
     } 

     startPos = endPos; 
    }); 
}); 
-1

ただ試してみてください。

$(function() { 
    $("#slider").slider({ 
     slide: function(event, ui) { 
      // use ui.value to get a number 
      // do your functions 
     } 
    }); 
}); 
+0

これはどのように値の変化を検出しますか? – isherwood

+1

はい、どうですか?私はスライドしながら機能をトリガしたくない、私はこれを望んでいる:ユーザーがスライドを停止し、現在の値が彼が起動したときとは異なるときにイベントを発生させる。 – SexyBeast

関連する問題