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

Question

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>

This is not a duplicate

Juan Picado
– Juan Picado

2016-09-27 11:52:35 +00:00
Commented Sep 27, 2016 at 11:52 — Juan Picado
– Juan Picado, Commented Sep 27, 2016 at 11:52

Andreas Louv · Accepted Answer · 2023-04-05 09:17:43Z

12

You cannot trigger a native event with jQuery's .trigger('change').

You will need to ceate a native event and dispatch it:

const evt = new Event("HTMLEvents");

And then to fire it:

const el = document.getElementById("input");
el.dispatchEvent(evt);

Deprecated:

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

edited Apr 5, 2023 at 9:17

answered May 9, 2016 at 10:45

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jono Over a year ago

evt.initEvent is now deprecated on everything but IE. Use new Event('change') constructor for modern browsers (see developer.mozilla.org/en-US/docs/Web/Events/…)

Munawir · Accepted Answer · 2016-05-09 10:43:36Z

0

Bind the change event using jquery.

$("#input").change(function() {
  alert(this.value);
});

Working snippet :

<!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">
      $( "#input" ).change(function() {
        alert(this.value);
      });
    </script>

    <input type="button" value="change input" onclick="  $('#input').val('bbbb').change();" />
</body>

</html>

answered May 9, 2016 at 10:43

Munawir

3,3569 gold badges36 silver badges51 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related