Jquery Trigger Inside Es6 Class Is Not Working

I´m struggling with a jQuery trigger inside an ES6 class. I can't figure out why this trigger is not working. This is my class. The trigger should be executed when the triggerFilt

Solution 1:

Base on the comment the problem is that two instances of jQuery are used.

The jQuery2130225834388266846541 tells you that the jQuery version 2.3.1 (the first three digits of the whole number, the other digits are the unique id of the instance) was used to register the event listener.

import $ from 'jquery'; includes the most likely the node module version (3.2.1)

The event triggering in jQuery does not use native events but an own event handling. You can only listen to events that are triggered by the same instance of jQuery that was used to register the even listeners (even if it is the same jQuery version), so you have to make sure that you only use one jQuery instance.

This is not only the case for event handling but also for .data(), because each instance of jQuery creates an own and isolated storage for data and even listeners. This can not only result in problems like the given one but also into memory leaks.

Solution 2:

I solved the problem by changing the jQuery trigger to native Javascript.

from:

this.sortTypeInput.trigger('change');

to:

const event = new Event('change'); document.getElementById('sortType').dispatchEvent(event);

I don´t know why jQuery trigger is not working thow.

Solution 3:

I had this problem and it came from the webpack context. Webpack create a copy of jquery so the event was triggered but in the wrong scope.

I deal with it by adding this line at the beggining of my code: $ = window.$;