tuzhis tuzhis - 6 months ago 126
Javascript Question

How to trigger JS native even addEventListener("change",function) by JQuery

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>

Answer

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);
Comments