Событие onclick для input

[Julia1991]

Изменила дизайн кнопок input type number. Проблема в том что когда у нас есть товары в корзине и при обновлении значения, если больше одного товара в корзине, то прибавляет все количество товаров в корзине. Но в итоге выдает правильное значение, только при обновлении количества выдает не правильно значение. Скрипт срабатывает сразу для всех input

<script>
                jQuery(document).live('click', '.number .number_controls > div', function() {
                    var input = jQuery(this).closest('.number_controls').find('input'); // инпут
                    var value = parseInt(input.val()) || 0; // получаем value инпута или 0
                    if (jQuery(this).hasClass('nc-minus')) {
                        value = value - 1; // вычитаем из value 1
                    }
                    if (jQuery(this).hasClass('nc-plus')) {
                        value = value + 1; // прибавляем к value 1
                    }
                    input.val(value).change(); // выводим полученное value в инпут; триггер .change() - на случай, если на изменение этого инпута у вас уже объявлен еще какой-то обработчик
                });
            </script>

код применила к корзине woocommers на wordpress

<div class="nc-minus"><i class="fas fa-angle-down"></i></div>
            <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php echo esc_attr( $label ); ?></label>
            <input
            type="text"
            id="<?php echo esc_attr( $input_id ); ?>"
            class="<?php echo esc_attr( join( ' ', (array) $classes ) ); ?>"
            step="<?php echo esc_attr( $step ); ?>"
            min="<?php echo esc_attr( $min_value ); ?>"
            max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
            name="<?php echo esc_attr( $input_name ); ?>"
            value="<?php echo esc_attr( $input_value ); ?>"
            title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
            size="4"
            inputmode="<?php echo esc_attr( $inputmode ); ?>" />
            <div class="nc-plus"><i class="fas fa-angle-up"></i></div>

[laimas]

live, этот метод из очень древней JQ, у вас что еще допотопная подключается?

if (jQuery(this).hasClass('nc-minus')) .... input.val(value).change(); не понятно что тут. Если вы подменяете управление полем (его кнопки), то есть простой способ без всяких if(какой класс, какая кнопка). Достаточно кнопкам указать значения равные 1, для минуса отрицательное. А затем к текущему значению прибавлять эти значения кнопок, думаю не надо объяснять правила арифметики и что будет.

input[0].valueAsNumber += parseInt(val), где val значение нажатой кнопки.

Зачем .change()?

PS. На свежую голову )

jQuery(document).live, это слишком древнее, подключайте новые версии и используйте метод .on(). Но делегировать обработчик (если есть необходимость) очень далекому предку, это не лучший выбор, делегировать нужно ближайшему родителю гарантированно существующему на странице, в примере это элемент с id "as".

Если изменять значение поля типа number программно, не его кнопками, то проверки крайних его значений с его стороны не будет. Кроме того, в ручном режиме ввода в это поле можно ввести и не цифровые символы. В общем это надо проверять. С учетом новой версии JQ и для примера кнопки, это кнопки, а не div. А для div можно использовать data атрибуты:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="as">
    <button value="-1">-</button> <input type="number" value="1" min="1" max="5" /> <button value="1">+</button><br />
    <button value="-1">-</button> <input type="number" value="1" min="1" max="5" /> <button value="1">+</button>
</div>
<script>
$('#as').on('click', 'button', function() {
    var bt = $(this), n = +bt.val(), num = (~n ? bt.prev() : bt.next())[0]; 
    if(!~n && num.value > num.min || ~n && num.value < num.max) num.valueAsNumber += v //к сожалению ослик не понимает valueAsNumber и нужно num.value = +num.value + v
}).on('input', '[type=number]', function() {
    this.value = this.value.replace(/\D/, ''); 
    if(!this.value) this.value = this.min //здесь тоже нужно проверять крайние значения и устанавливать соответствия 
});
</script>

".change() - на случай, если на изменение этого инпута..." - ну так это проверить можно, в Хроме для есть плагин (вот как дразнится не помню), а в отладчике FF это встроено, все назначенные элементу обработчики событий можно посмотреть в инспекторе кода.

[рони]

Julia1991,
может так?

var input = jQuery(this).parent().find('input');

// инпут

[рони]

Julia1991,
данный скрипт должен быть один на всю страницу, а не в каждой карточке свой.

[Julia1991]

Спасибо, теперь все работает