Событие вращения Jquery spinner задержано в значении

Question

INFO

Я хочу обновить текст кнопки при изменении значения счетчика. Здесь для меня нужно было добавить 2 события в счетчик. Событие change и событие spin. Событие change запускается, когда пользователь нажимает кнопку (например, для добавления значения +10 или -10). Событие spin запускается, когда пользователь нажимает на ui-spinner-buttons, чтобы добавить значение +1 или -1. У меня есть следующий код для обновления текста кнопки:

CODE

var spinner = $("#spinnerTool").spinner(
    {
        change: function (event, ui) {
            $("#payCoinsBtn").html('Pay €' + $(this).val());
        },
        spin: function (event, ui) {
            $("#payCoinsBtn").html('Pay €' + $(this).val());
        }
    }
);

$("#plusTen").click(function () {
    var spinnerValue = parseInt($("#spinnerTool").val());
    spinner.spinner("value", spinnerValue + 10);
});

$("#minusTen").click(function () {
    var spinnerValue = parseInt($("#spinnerTool").val());
    spinner.spinner("value", spinnerValue - 10);
});

//HTML
<div id="spinner">
    <button id="minusTen" type="button">- 10</button>
    <input id="spinnerTool" name="value" value="1" min="1">
    <button id="plusTen" type="button">+ 10</button>
</div>

ВЫПУСКА

Когда нажата кнопка и запущено событие change, правильный текст со значением находится внутри кнопки (например, «Pay € 10»), но когда нажата кнопка ui-spinner-buttons и событие spin при срабатывании значение внутри кнопок всегда на 1 шаг позади. Поэтому, когда значение внутри счетчика равно 3, текст внутри кнопок говорит: «Заплати € 2».

Почему это происходит в событии spin, а не в событии change и как я могу это решить?

Answer 1

Использовать событие остановки:

var spinner = $("#spinnerTool").spinner(
{
   stop: function (event, ui) {
      //alert("Current = " + $("#spinnerTool" ).spinner("value")) ;
      $("#payCoinsBtn").html('Pay €' + $(this).val());
   },
    ...             }
});

Answer 2

Очевидно, событие spin было вызвано до того, как текущее значение увеличилось или уменьшилось на 1. Поэтому я поместил код для изменения текста кнопки в функции, которая называется ПОСЛЕ ТОГО, когда текущее значение увеличено или уменьшено. Как это:

$('.ui-spinner-up').click(function () {
    $("#payCoinsBtn").html('Pay €' + $("#spinnerTool").val());
});

$('.ui-spinner-down').click(function () {
    $("#payCoinsBtn").html('Pay €' + $("#spinnerTool").val());
});