How to track the change event in input (change doesn't work for some reason)?

Question

JavaScript

There is a jquery-ui slider.

And also exists
input[name='containers-count']
in which the value from this slider is transferred.

I need to track if there was a change inside the input. My attempt to do it looks like this

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

For some reason this doesn't work.

I will also say that the script of the UI itself lies stupidly in the page code, and is like this

. And I do further manipulations from another file (made through a coffee pot).

That is, for some reason it .changenormally works in the first case, and in the second case it does not work at all.

I don't know, maybe there's some sort of scope trick or something? In general, what can be done here? Maybe there is some other event that can catch the value state of the input?

update: so, I understand, it does not plow in the first case either, the coffee pot has nothing to do with it)) however, the question remains open, how to track the event?

Answer 1

You can also, if you really want to change, add it to the slide $('#amount').trigger('change');AND it will work :)
But in general, yes, it's better to just use the slide event.

Answer 2

In this form, change is triggered when you click on enter.
HTML:
JS:

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

If you need the check to be on any click, then here:

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

Answer 3

There is also a keydown event.

Answer 4

I understand what the problem is)))
No change will help you here .
You need to refer to the bootstrap-slider function itself https://seiyria.com/bootstrap-slider/
Where they make it clear which variable should be accessed to get it, for example

$('#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;
        
    }
});

How to display something like this, I think you understand, and if not, then:

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

And that's it, nothing more is needed. )) I wish you success. ;-)