Как отследить событие изменения в input (change почему то не работает)?

Question

[Ярослав IKARUS]

Есть jquery-ui ползунок.

А так же существует
input[name='containers-count']
в который передается значение из этого ползунка.

Мне нужно отследить произошло ли изменение внутри input. Моя попытка сделать это выглядит вот так

$("input[name='containers-count']").change ->
		console.log "TEST"

Это дело почему то не срабатывает.

Скажу так же что скрипт самого UI лежит тупо в коде страницы, и представляет из себя вот что

А уже дальнешие манипуляции я делаю из другого файла (сделанного через кофейник).

То есть почему то .change нормально срабатывает в первом случае а во втором случае он нифига не срабатывает.

Не знаю, может быть тут есть какой то прикол с областью видимости или типа того? В общем что можно тут сделать? Может быть есть какое то другое событие которое может отловить состояние value у input?

update: так, я понял, оно и в первом случае не пашет, кофейник тут точно не причем)) однако вопрос остается открытым, как событие то отследить?

Comments

[Ярослав IKARUS]

хах, ну да, оно и в первом случае не работает)))

[Игорь Васильев]

Ярослав IKARUS, воспользуйтесь документацией https://seiyria.com/bootstrap-slider/
там уже готовый код написан, просто используйте его по назначению.

Answer 1

[Иван Игнатьев]

Можно ещё, если уж очень хочется change, в slide добавить $('#amount').trigger('change'); И заработает :)
Но вообще да, лучше просто событие slide юзать.

Answer 2

[Maxim Nepritimov]

В таком виде change срабатывает при клике на enter.
HTML:
<input id="foo" type="text" />
JS:

$(function () {
    $('#foo').on('change', function () {
        console.log('change');
    });
});

Если вам надо, чтобы проверка была при любом клике, то вот:

$(function () {
    $('#foo').on('keydown', function () {
        console.log('change');
    });
});

Comments

[Ярослав IKARUS]

ну дело в том что мне не клик надо отследить а изменение value у инпута, а это самое value изменяется когда изменяется ui, так что keydown не подходит

Answer 3

[Foo Bar]

Есть еще событие keydown.

Comments

[Ярослав IKARUS]

не работает

[Foo Bar]

подождите, а зачем вам отлавливать событие изменения значения в input (вы же туда программно значение указываете), если у вас уже есть событие изменения слайдера?

[Ярослав IKARUS]

atomheart: потому что событие изменения слайдера находится в другом файле. А мне хочется чтобы оно было раздельно. Ну конечно в принципе можно засунуть это все в один файл, но это как то тупо. Должно же быть событие которое отвечает за изменение input, не может такого быть что его нет

[Foo Bar]

Ну, одно дело пользователь что-то меняет, другое - само приложение. Разные механизмы обработки.
Вы можете вызвать событие change или keydown искусственно для этого input после его изменения. Тогда логика у вас будет разделена.
А еще вы можете написать таймер, который будет отслеживать изменения значения инпута несколько раз в секунду. Это не очень хорошее решение, т.к. нагрузка на CPU, но оно будет работать.

[Константин Громов]

Ярослав IKARUS: #slider после инициализация генерирует событие slide. На него и подписывайте ещё одну функцию отдельно: $("#slider").on("slide", function(event, ui) {/*****/});

Answer 4

[Игорь Васильев]

Я понял в чём проблема )))
Вам не поможет здесь никакой change
Надо обращаться к самой функции bootstrap-slider https://seiyria.com/bootstrap-slider/
Где ясно дают понять, к какой переменной надо обращаться, чтобы её получить, например

$('#slider').slider({
    formatter: function(value) {

        var x  = value;
        var d  = 0.015;
        var m  = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); // при форматировании числа с запятой 1,000,000
        var one  = x * Number(d); // умножение с нецелыми числами

        $('#text').html(x + ' $');
        $('#return').html(one.toFixed().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); // если надо округлить не целое число 4.554849 и вставить запятые как в m

        return z;
        
    }
});

Как выводить подобное, я думаю вы поняли, а если нет, то:

<div id="text"></div>
<div id="return"></div>

И всё, ничего больше не нужно. )) Успехов вам. ;-)