web-dev-qa-db-ja.com

jquery.ui.spinnerの変更

Jquery.ui.spinner.jsの最新バージョンを使用しようとしています。 http://wiki.jqueryui.com/w/page/12138077/Spinner

スピナーが表示され、テキストボックスを更新していますが、「変更」イベントをキャプチャする方法を理解するのに苦労しています。テキストボックスの値を手動で変更するとトリガーされますが、スピナーの矢印を使用するとトリガーされません。

jquery：

    $('input[name*="opening"]').spinner({ min: 0, max: 100});

    $('#doorsize6w7h-f').spinner().change(function(){
         alert($(this).spinner('value'));
    });

html：

<input type="text" value="0" class="front" id="doorsize6w7h-f" name="opening[0][0]" />
jqueryeventsuser-interfacespinneronchange
21
etriad

テキストボックスのchange()を呼び出すイベントをスピナーコントロールにアタッチします。

$('.ui-spinner-button').click(function() {
   $(this).siblings('input').change();
});

jsFiddle 。

スピナーをセットアップした後。

36
alex

私はこれがあなたが必要とするものだと思います：

$('.mySpinner').spinner({          
    stop:function(e,ui){
        alert('Triggered after a spin.');
    }
});

ボタンのclickイベントへのバインドとは異なり、これはキーボードの上下キーの使用も検出します。

詳細およびその他のイベントについては、このページを参照してください。 http://api.jqueryui.com/spinner/#entry-examples

20
Pablo S G Pacheco

「変更」イベントはなく、代わりに「スピンストップ」イベントを使用します。

$('#doorsize6w7h-f').on("spinstop", function(){
   alert($(this).spinner('value'));
});

ドキュメントにはspinchangeイベントも示されていますが、それは私にとっては少し遅れます。

リソース： http://api.jqueryui.com/spinner/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUI%2FSpinner%2Fspinner%26redirect%3Dno ＃event-change

8
Arman Bimatov

まあ、実際に私は標準の「変更」イベントを介して変更をルーティングし、そのようにすべてをキャプチャします：

$('input[name*="opening"]').spinner({
    min: 0,
    max: 100,
    spin: function(event, ui) {
        $(this).change();
    }
});
6
George Mavritsakis

これは私に最も流動的な結果を与えています：

function betterSpinner(input)
{
    input.spinner(
    {
        spin: function(event, ui)
        {
            // the spin event is raised before the value actually gets changed,
            // so let's update it here before raising the input's change() event.
            input.val(ui.value);
            input.change();
        }
    });
}

$(document).ready(function ()
{
    betterSpinner($("#myInput"));
});
3
mm201

この質問にはすでに回答済みです。しかし、これが他の人の役に立つことを願っています。

手動で値を編集してスピナーの矢印ボタンを使用する以外に、キーボードの矢印ボタンを使用してスピナーの値を編集することもできます。この場合、キーアップイベントは変更イベントよりも堅牢です。

$(document).ready(function(){
    var range_spinner = $('.spinner').spinner(); 

    // hack to trigger input keyup whenever spinner button clicked:
    $('.ui-spinner-button').click(function() { $(this).siblings('input').keyup(); });   

    // keyup will catch any stroke on keyboard
    $('#range').keyup(function(){
       console.log(range_spinner.spinner('value')); 
    });
});
0
goFrendiAsgard