Jquery изменить значение текстового поля и запустить функцию

Question

Я изо всех сил пытаюсь заставить функцию работать, когда текстовое поле изменяется при нажатии кнопки.Поэтому при нажатии кнопки «плюс / мин» ввод текста изменяется на новое значение.Однако я хочу запустить функцию, когда значение текстового поля изменяется с помощью этих кнопок или путем ввода значения внутри текстового поля.

Ручной набор текста работает, но функция не запускается при использовании кнопки.

Мой HTML (есть несколько ячеек таблицы, как показано ниже):

<td class="amt">
  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i></button>
  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">
  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i></button>
</td>

Мой JS:

$(function(){ 

  $('.pp_order_min').bind("click", function(){
   if($(this).next().val() !== '0') $(this).next().val(parseInt($(this).next().val()) - 1);
      $(this).next().trigger('change') // next is the input field
  });
  $('.pp_order_plus').bind("click", function(){
   if($(this).prev().val() !== '999') $(this).prev().val(parseInt($(this).prev().val()) + 1);
      $(this).prev().trigger('change') // prev is the input field
  });

  $('.pp_count').each(function(){ // using each since there are more input fields like this
    $(this).bind('input', function(){ // also tried 'on change' etc
      var amt = $(this).val();
      getNewAttributes(amt);
      console.log(amt);
     });
   });

 });

Я думал, что вызвать событие изменения и связатьвходное событие будет работать.Но это не так!Я также пробовал буквально каждый случай перемен, который я мог придумать.

Я, наверное, пропускаю что-то глупое здесь!Любая помощь с благодарностью.

Answer 1

Вы должны вызвать input вместо change, поскольку это то, к чему вы привязываетесь.

Answer 2

Я предлагаю вам связать только одну функцию изменения времени с полем ввода.

$(function(){ 

  $('.pp_order_min').on("click", function(){
     var currentObj=$(this);
     debugger;
     if(currentObj.next().val()  === '') return;
     if(currentObj.next().val() !== '0') currentObj.next().val(parseInt(currentObj.next().val()) - 1);
     currentObj.next().change(); // next is the input field
  });
  $('.pp_order_plus').on("click", function(){
   var currentObj=$(this);
   debugger;
   if(currentObj.prev().val()  === '') return;
   if(currentObj.prev().val() !== '999') currentObj.prev().val(parseInt(currentObj.prev().val()) + 1);
      currentObj.prev().change(); // prev is the input field
  });
  $('.pp_count').on('change input', function(){ // also tried 'on change' etc
      var amt = $(this).val();
      console.log(amt)
   });
   $('.pp_count').each(function(){ // using each since there are more input fields like this
      $(this).click();// 
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="amt">
  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>
  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">
  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>
</td>

Пожалуйста, посмотрите здесь для нескольких текстовых полей.

Answer 3

используйте .change() вместо триггера

$(function(){ 

  $('.pp_order_min').bind("click", function(){
   if($(this).next().val() !== '0') $(this).next().val(parseInt($(this).next().val()) - 1);
      $(this).next().change() // next is the input field
  });
  $('.pp_order_plus').bind("click", function(){
   if($(this).prev().val() !== '999') $(this).prev().val(parseInt($(this).prev().val()) + 1);
      $(this).prev().change() // prev is the input field
  });

  $('.pp_count').each(function(){ // using each since there are more input fields like this
    $(this).bind('change input', function(){ // also tried 'on change' etc
      var amt = $(this).val();
      //getNewAttributes(amt)
      console.log(amt)
     });
   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="amt">
  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>
  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">
  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>
</td>