Как отследить изменение поля (input), если оно изменено с помощью Jquery Slider UI?

Question

[Иван Ильясов]

Делаю калькулятор. Ползунок изменяет значение поля input, но калькулятор не видит изменения в этом поле, поскольку изменение привязано к событию .change(). Но.. Цитирую: "Данное событие обычно активируется, когда элемент типа input теряет фокус ввода и при этом изменилось значение элемента с момента получения фокуса."

Пытался подключить плагин jQuery Text Change, стало еще лучше. Значение калькулятора стало меняться мгновенно при изменении input-поля, но только если делать данное действие вручную. Если поле меняет ползунок, всё равно не работает калькулятор.

Демо тут: jsfiddle.net/ckntr2jy

Answer 1

[Nikolay Talanov]

Ух, чет я давно не купался в таком жутком коде :)
К сожалению на рефакторинг этого чуда у меня сил не хватило, так что вот что получилось в итоге:
jsfiddle.net/ckntr2jy/1
В общем я допилил логику работы двух методов слайдера

slide: function( event, ui ) {
  $( "#slider-result" ).html( ui.value );
  $('#area').val(ui.value).trigger("change");  // тут добавлен триггер change ивента
},
change: function(event, ui) { 
  $('#area').val(ui.value).trigger("change");
}

Теперь при слайдинге в реалтайме меняются циферки, а не только когда отпускаешь слайдер.
Совет: изучи синтаксис jQuery и посмотри чужой код. Такое ощущение что это экземпляр из 2008 года.

Comments

[Иван Ильясов]

Спасибо огромное! Это просто чудо)))))

[Nikolay Talanov]

Иван Ильясов: Научись пользоваться биндингом ивентов с помощью синтаксиса $(document).on("event1 event2 event3", ".target-class", function(){%action%});
В моем примере на 46 строчке имеется переделанный биндинг для #area с ивентами "change" и "keyup". А то $selector.$event это путь к жуткой лапше.

[Иван Ильясов]

Nikolay Talanov: Обязательно буду двигаться в этом направлении. Спасибо за подсказки)

[Иван Ильясов]

Nikolay Talanov: возникла проблемка: Если менять значение в поле input, то ползунок не перескакивает на нужное место.
Например, если максимальное значение "1000" и в input прописать "500", то ползунок перескакивает ровно на середину.

Сейчас это не работает. Видимо, какой-то конфликт.

[Nikolay Talanov]

jsfiddle.net/ckntr2jy/6 внутри отслеживания событий инпута добавил $( ".slider" ).slider("value", area_numb); + убрал change event слайдера (ибо вместе с ним при изменении инпута слайдер создавал рекурсию по изменениям).

[Иван Ильясов]

Nikolay Talanov: Спасибо! Сразу видно, что Вы про в этом деле =)
Мне еще учиться и учиться..

[Nikolay Talanov]

Иван Ильясов: У меня опыт год и 3.5 месяца :) В первую очередь учитесь гуглить, и гуглить при этом по-английски. На stackoverflow найдется все. Ну или почти все.