Question

我有这个演示html和JS：

$('#inputs').on('change keypress keyup paste', 'input, select, textarea', function (event) {
    alert(event);
  console.log(event);          
});


$('button').on('click', function (event) {
  console.log("click");
  var input = document.getElementById('number');
    if("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("change", false, true);
        input.dispatchEvent(evt);
    } else {
        input.fireEvent("onchange");
    }
            
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inputs">
  <input name="number" type="number" id="number" value="">  
</div>

<button type="button">CLICK</button>

无法正常工作。警报和console.log不显示任何内容。

我只想单击输入后面的按钮并发送到输入更改事件。我的简单代码有什么问题？

Answer 1

检查下面的代码。我使用了另一种触发事件的方式。现在，如果您单击按钮，则会在输入上触发更改事件。

$('#inputs').on('change keypress keyup paste', 'input, select, textarea', function (event) {
  console.log('Change event');
});


$('button').on('click', function (event) {
  console.log('Click event');
  
  var input = document.getElementById('number');
  var event = new Event('change', {
    bubbles: true,
    cancelable: true
  });
  
  input.dispatchEvent(event);
});

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

<div id="inputs">
  <input name="number" type="number" id="number" value="">  
</div>

<button type="button">CLICK</button>

手动更改事件未触发

1 个答案: