Menu
This is not a duplicate of How to trigger jQuery change event in code, since that deals with the interaction of jQuery with jQuery event listeners, while this question discusses the interaction of jQuery with native event listeners.
I use addEventListener to bind a change event for an input, but $('#input').val('bbbb').change(); can't trigger the alert, how to trigger addEventListener("change",function) function by JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>code</title>
</head>
<body>
<script src="http://o6flfbzth.bkt.clouddn.com/jquery-1.12.0.min.js"></script>
<input id="input" type="text" value="input" />
<script type="text/javascript">
document.getElementById("input").addEventListener("change", function() {
alert(this.value);
});
</script>
<input type="button" value="change input" onclick=" $('#input').val('bbbb').change();" />
</body>
</html>
923
You cannot trigger a native event with jQuery's .trigger('change'). You will need to create a native event and dispatch it:
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', true, true);
// ^ ^ ^
// | | cancelable
// | bubbles
// type
And then to fire it:
var el = document.getElementById("input");
el.dispatchEvent(evt);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
