JQuery trigger('input') does not fire native JavaScript input event

Question

I have a code which needs to trigger the input event manually on an input with a datepicker.

The code looks like:

input.on('apply.daterangepicker', function(e) {
    input.trigger('input');
});

input.on('input', function(e) {
    console.log('11111111111111111111');
});

document.getElementById('filter-created-at').addEventListener('input', function(e) {
    console.log('22222222222222222222');
});

The first jQuery event listener works fine. But the second pure JavaScript does not catch the input event. Don't understand it. How can I catch input from trigger() with pure JavaScript addEventListener()?

Unmitigated · Accepted Answer · 2021-08-03 22:06:56Z

1

You can use Element#dispatchEvent to trigger an input event.

document.getElementById('filter-created-at').addEventListener('input', function(e) {
  console.log('Regular input');
});
$('#filter-created-at').on('input', function(e) {
  console.log('jQuery input');
});
document.getElementById('filter-created-at').dispatchEvent(new Event('input', {
  bubbles: true
}))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="filter-created-at" />

answered Aug 3, 2021 at 22:06

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

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

5 Comments

Čamo Over a year ago

This is the only way? No simpler and cleaner solution? It should be simpler.

Unmitigated Over a year ago

@Čamo This isn't a difficult solution to use. I don't believe there is any other way.

Čamo Over a year ago

I hope there is something like element.input() like element.submit().

Unmitigated Over a year ago

@Čamo Unfortunately, there is no such method.

Čamo Over a year ago

Ok thank you it works. But I dont understand why jquery trigger() does not call dispatchEvent()? I expected that.

Collectives™ on Stack Overflow

JQuery trigger('input') does not fire native JavaScript input event

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related