How can I emulate input event using jQuery?

Question

This is my code:

$("input[type=text]").on("input", function(){
  console.log("input event fired.");
})

$("input[type=button]").on("click", function(){
  var event = new Event('input');
 $("input[type=text]").dispatchEvent(event);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="write .." />
<input type="button" value="emulate input event" />

As you can see, when you write something into the input, input event works as well. How can I emulate that event when you click on the button?

mplungjan · Accepted Answer · 2018-06-12 09:32:34Z

2

jQuery uses trigger

If you want to use dispachtEvent, you need the DOM element.

$("input[type=text]").on("input", function(){
  console.log("input event fired.");
})

$("input[type=button]").on("click", function() {
  // EITHER
  $("input[type=text]").trigger("input");
  // OR
  var event = new Event('input');
  $("input[type=text]")[0].dispatchEvent(event); // DOM 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" placeholder="write .." />
<input type="button" value="emulate input event" />

edited Jun 12, 2018 at 9:32

answered Jun 11, 2018 at 12:10

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

Comments

Ali Sheikhpour · Accepted Answer · 2018-06-11 12:10:44Z

1

$("input[type=text]").on("input", function(){
  console.log("input event fired.");
})

$("input[type=button]").on("click", function(){
 $("input[type=text]").trigger("input");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="write .." />
<input type="button" value="emulate input event" />

answered Jun 11, 2018 at 12:10

Ali Sheikhpour

11.4k5 gold badges54 silver badges100 bronze badges

Comments

Zakaria Acharki · Accepted Answer · 2018-06-11 12:11:04Z

0

You could simply use the .trigger() method to fire the event by name like :

$("input[type=button]").on("click", function(){
    $("input[type=text]").trigger("input");
})

$("input[type=text]").on("input", function() {
  console.log("input event fired.");
})

$("input[type=button]").on("click", function() {
  $("input[type=text]").trigger("input");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="write .." />
<input type="button" value="emulate input event" />

answered Jun 11, 2018 at 12:11

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Comments

Glubus · Accepted Answer · 2018-06-11 12:11:11Z

0

In jQuery you can just call the event type on the element.

To invoke a click event on an element do:

$("foo").click();

For an input field, the best option is usually to

$("foo").change();

answered Jun 11, 2018 at 12:11

Glubus

2,8651 gold badge14 silver badges27 bronze badges

Collectives™ on Stack Overflow

How can I emulate input event using jQuery?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related