Мой jQuery фрагмент распознает ручной ввод, но не ввод onClick

Question

Я пытаюсь суммировать поля моей формы. Если я вставлю значение вручную, это работает. Но когда я добавляю значения, нажимая на кнопки, это не так. Я верю, что должен что-то изменить в части jQuery, но я не знаю что. У кого-нибудь есть идея?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>

<script type="text/javascript">
$('form#lines-form-1 :input').change(function() {
  var tot = 0;
  $("form#lines-form-1 :input").each(function() {
    tot += Number($(this).val());    
  });
  $('#tot-qty').text(tot);
});
</script>

<script>
   function changeValueA(x){
     document.getElementById('i1').value=x.innerHTML;
    }
    function changeValueB(x){
     document.getElementById('i2').value=x.innerHTML;
    }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div>
    <text>Field A</text>
    <button id="80" onclick="changeValueA(this)">80</button>
    <button id="50" onclick="changeValueA(this)">50</button>
</div>

<div>
    <text>Field B</text>
    <button id="80" onclick="changeValueB(this)">80</button>
    <button id="50" onclick="changeValueB(this)">50</button>
</div>


<form id="lines-form-1">
  <label>Field A</label>
  <input type="text" id="i1" name="i1">
  <br>
  <label>Field B</label>
  <input type="text" id="i2" name="i2">
  <br>
</form>

<div id="tot-qty">0</div>

Answer 1

Проблема заключается в том, что ручное изменение значения input с помощью кода не вызывает никаких событий. Поэтому прослушиватель событий change, созданный вами для обновления общего количества, никогда не срабатывает. Чтобы исправить это, вы можете вручную trigger() событие после обновления значения.

Также обратите внимание, что рекомендуется использовать ненавязчивые обработчики событий вместо встроенных. Поскольку вы уже включили jQuery на страницу, вы можете придерживаться этого. Попробуйте это:

$('button').on('click', function() {
  let value = this.value;
  $($(this).data('target')).val(value).trigger('input');
});

$('.field').on('input', function() {
  let tot = 0;
  $("form#lines-form-1 :input").each((i, el) => tot += parseInt(el.value || 0, 10));
  $('#tot-qty').text(tot);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div>
  <text>Field A</text>
  <button type="button" id="80" data-target="#i1" value="80">80</button>
  <button type="button" id="50" data-target="#i1" value="50">50</button>
</div>

<div>
  <text>Field B</text>
  <button type="button" id="80" data-target="#i2" value="80">80</button>
  <button type="button" id="50" data-target="#i2" value="50">50</button>
</div>


<form id="lines-form-1">
  <label>Field A</label>
  <input type="text" class="field" id="i1" name="i1"><br>

  <label>Field B</label>
  <input type="text" class="field" id="i2" name="i2"><br>
</form>

<div id="tot-qty">0</div>