Использование .stepUp () с JQuery возвращает ошибку «.stepUp не является функцией»

Question

У меня есть следующий код:

См. Пример на codepen здесь: https://codepen.io/Rubenkretek/pen/VwYQVgO?editors=1111

Ожидаемый результат: поле ввода увеличивается на 1 при нажатии на '+ Кнопка '.

Фактический результат: без изменений на входе и следующая ошибка:

Ошибка типа: selectedInput.stepUp не является функцией

$(function() {

  $('<span class="add" uk-icon="plus">+</span>').insertAfter('.product-container .product-quantity input');
  $('<span class="sub" uk-icon="minus">-</span>').insertBefore('.product-container .product-quantity input');


  $('.add').click(function() {

    var selectedInput = $(this).prev('input');

    if (selectedInput.val() < 10) {
      console.log("value is less than 10");
      $('.add').click(function() {
        selectedInput.stepUp(1);
      });
    }

  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-container">
  <div class="product-info">
    <h2>Product name</h2>
  </div>
  <div class="product-quantity">
    <input type="number"></input>
  </div>
</div>

Answer 1

Вы вкладываете обработчики событий. Только один и делегат

Кроме того, stepUp является методом DOM, поэтому вам нужно получить элемент DOM из jQuery (добавление [0] к элементу)

ПРИМЕЧАНИЕ. Тип = число имеет свои собственные элементы управления вращением

$(function() {

  $('<span class="add" uk-icon="plus">+</span>').insertAfter('.product-container .product-quantity input');
  $('<span class="sub" uk-icon="minus">-</span>').insertBefore('.product-container .product-quantity input');

  $('.product-quantity').on("click", '.add, .sub', function() {
    const selectedInput = $(this).closest('div').find('input')[0]; // stepUp is a DOM method
    let dir = $(this).is(".add");
    selectedInput.stepUp(dir ? 1 : -1);
    if (selectedInput.value < 10) {
      console.log("value is less than 10");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-container">
  <div class="product-info">
    <h2>Product name</h2>
  </div>
  <div class="product-quantity">
    <input type="number" />
  </div>
</div>