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

使用.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>

Answer 2

您应该触发input而不是change，因为这是您要绑定的内容。

Answer 3

我建议您仅将一个时变功能绑定到输入框。

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

请查看here，以查看多个文本框。

jQuery更改文本字段值并运行功能

3 个答案: