Je me bats pour obtenir une fonction à exécuter lorsqu'un champ de texte est modifié sur un clic de bouton. Ainsi, lorsque vous cliquez sur un bouton plus / min, la saisie de texte est remplacée par une nouvelle valeur. Cependant, je veux exécuter une fonction lorsque la valeur du champ de texte est modifiée par ces boutons ou en tapant une valeur à l'intérieur du champ de texte.

La saisie manuelle fonctionne mais, d'une manière ou d'une autre, la fonction ne s'exécutera pas lors de l'utilisation d'un bouton.

Mon html (il y a plusieurs cellules de tableau comme ci-dessous):

<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>

Mon 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);
     });
   });

 });

Je pensais que déclencher un événement de modification et lier un événement d'entrée fonctionnerait. Mais ce n'est pas le cas! J'ai également essayé littéralement chaque événement de changement auquel je pouvais penser.

Je néglige probablement quelque chose de stupide ici! Toute aide grandement appréciée.

0
Meules 20 nov. 2018 à 15:53

3 réponses

Meilleure réponse

Vous devez déclencher input au lieu de change, car c'est à cela que vous vous liez.

0
yunzen 20 nov. 2018 à 13:07

Utilisez .change() à la place pour déclencher

$(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>
0
Luis felipe De jesus Munoz 20 nov. 2018 à 13:01

Je vous suggère de ne lier qu'une seule fonction de changement d'heure à la zone de saisie.

$(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>

Veuillez consulter ici pour plusieurs zones de texte.

0
Negi Rox 20 nov. 2018 à 13:21