CODEWITHSUNDEEP
javascript
step
step

Reputation: 2410

Manually change event not fired

I have this demo html and 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>

Which not work as expected. alert and console.log not show anything.

I just want click button behind input and send to input change event. What is wrong with my simple code?

Upvotes: 0

Views: 83

Answers (1)

David
David

Reputation: 393

Check the code below. I have used a different way of firing the event. Now if you click the button, change event gets fired on the input.

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

Upvotes: 2

Related Questions