ValueChange() 事件在移动设备上不起作用

Question

我正在写一个计算器

问题：我需要在单击按钮时将 $('.plan-select').val() 添加到 $('output').text() 中。事件 change() 和 input() 没有帮助捕捉它在处理程序中的变化，所以我在这里 https://developer.mozilla.org/ru/docs/Web/Events.

找到了 ValueChange() 事件

我需要 <output> 来在点击时即时刷新，它在 PC 上 ValueChange() 工作正常，但在移动设备上无法正常工作。

// Button
$('.plan-select').on('click', function() {
  var value = $(this).data("plan");
  $(".planlist").val(parseInt(value)).change();
});


// Handler. it collects checked checkboxes and <select> statement
window.addEventListener('DOMContentLoaded', function() {
  var form = document.querySelector('form'),
    elem = form.querySelectorAll('[name^="itemtype"]'),
    value = form.querySelectorAll('[name^="labelname"]'),
    output = document.querySelector('output');

  function total() {
    output.innerHTML = [].reduce.call(elem, function(sum, el) {
      var n = (+el.value || 0) * (el.checked || el.tagName == "SELECT" || el.type == "text");
      return sum + n
    }, 0);
  }

  form.addEventListener('ValueChange', total);
  form.addEventListener('change', total);
  form.addEventListener('input', total);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Buttons -->
<a href="#pricing" class="plan-select" data-plan="35000">Option1</a>
<a href="#pricing" class="plan-select" data-plan="45000">Option2</a>
<a href="#pricing" class="plan-select" data-plan="65000">Option3</a>



<!-- Form -->
<div id="pricing">
  <form id="calc">
    <select name="itemtype5" class="planlist" id="l">
      <option class="no-display" value="0">Hidden</option>
      <option value="35000">Option1</option>
      <option value="45000">Option2</option>
      <option value="65000">Option3</option>
    </select>

    <input type="checkbox" class="checkbox_check" name="itemtype1" id="d" data-genrename="Genre1" value="3000" data-time="10">
    <label>Genre1</label>

    <input type="checkbox" class="checkbox_check" name="itemtype2" id="e" data-genrename="Genre2" value="4000" data-time="15">
    <label>Genre</label>

    <input type="checkbox" class="checkbox_check" name="itemtype3" id="f" data-genrename="Genre3" value="10000" data-time="24">
    <label>Genre3</label>

    <input type="checkbox" class="checkbox_check" name="itemtype4" id="g" data-genrename="Genre4" value="3000" data-time="10">
    <label>Genre4</label>


    <label>Total:</label>
    <output name="o" class="total" for="a b c d e f g h l">35000</output>

  </form>
</div>

按钮： https://elevate.kz/#plans

处理程序： https://elevate.kz/#pricing

谢谢。

Answer 1

你对 genre3 的引用有误

尽量使用jQuery一路：

function total() {
  let sum = 0;
  $("form :input").each(function() {
    var n = (+this.value || 0) * (this.checked || this.tagName == "SELECT" || this.type == "text");
    sum += n
  })
  $(".total").text(sum);
}  

$(function() {
  // Button
  $('.plan-select').on('click', function() {
    var value = $(this).data("plan");
    $(".planlist").val(parseInt(value)).change();
  });

  $("#calc").on("change", "select[name^=itemtype]", total)
  $("select[name^=itemtype]").trigger("change"); 
  $("#calc").on("touchstart click", "input[type=checkbox][name^=itemtype]", total); 
  $("#calc").on("input", "input[type=text][name^=itemtype]", total); // if exists


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Buttons -->
<a href="#pricing" class="plan-select" data-plan="35000">Option1</a>
<a href="#pricing" class="plan-select" data-plan="45000">Option2</a>
<a href="#pricing" class="plan-select" data-plan="65000">Option3</a>



<!-- Form -->
<div id="pricing">
  <form id="calc">
    <select name="itemtype5" class="planlist" id="l">
      <option class="no-display" value="0">Сайт-визитка</option>
      <option value="35000">Option1</option>
      <option value="45000">Option2</option>
      <option value="65000">Option3</option>
    </select>

    <input type="checkbox" class="checkbox_check" name="itemtype1" id="d" data-genrename="Genre1" value="3000" data-time="10" />
    <label>Genre1</label>

    <input type="checkbox" class="checkbox_check" name="itemtype2" id="e" data-genrename="Genre2" value="4000" data-time="15" />
    <label>Genre</label>

    <input type="checkbox" class="checkbox_check" name="itemtype3" id="f" data-genrename="Genre3" value="10000" data-time="24" />
    <label>Genre3</label>

    <input type="checkbox" class="checkbox_check" name="itemtype4" id="g" data-genrename="Genre4" value="3000" data-time="10" />
    <label>Genre4</label>


    <label>Total:</label>
    <output name="o" class="total" for="a b c d e f g h l">35000</output>

  </form>
</div>

ValueChange() 事件在移动设备上不起作用

ValueChange() event doesn't work on mobile

jquery

onchange

valuechangelistener