Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not triggering on change for select element #378

Open
bland-industries opened this issue May 15, 2017 · 3 comments
Open

Not triggering on change for select element #378

bland-industries opened this issue May 15, 2017 · 3 comments

Comments

@bland-industries
Copy link

bland-industries commented May 15, 2017

I am adding an on change event listener to a select element and it works when I don't use the this plug in. When I add selectBoxIt to my selects it doesn't trigger the event to the original select element. I can manually trigger it to get my listeners to work for testing purposes. I am using a vanilla js process to add and listen to the change event. Any thoughts?


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

@vensires
Copy link

vensires commented Aug 29, 2017

This also affects me. The following acts as a workaroung in my case but I would like the onchange events to get automatically handled:
var selectBox = select.data("selectBox-selectBoxIt");
selectBox.selectOption(select.val());

@h908714124
Copy link

h908714124 commented Sep 21, 2017

ok, I've found out that the change event does trigger, but only if you bind your listener via jQuery.change. A listener that's bound natively via addEventListener will not trigger.

This should at least be documented on the project website.

@JetmirAhmati
Copy link

JetmirAhmati commented Sep 27, 2019

hi, i have experienced the same issue and i tried to create and trigger manually the change event.
Now 'change' event is detected by native event listener.

 var selectboxElements = $j('.droplist:not(.ranking) select, .datePicker select', this.element);
    selectboxElements.selectBoxIt({
        native: false,
        autoWidth: false,
        dynamicPositioning: false,
        isMobile: function () { }
    });

    selectboxElements.on('change', (function () {
        var value = null;
        return function (event) {
            var target = event.target;
            if (value !== event.target.value) {
                value = target.value;

                if (typeof (Event) === 'function') {
                    target.dispatchEvent(new Event('change'));
                } else {
                    var newEvent;                               //fix for IE
                    newEvent = document.createEvent('Event');
                    newEvent.initEvent('change', true, true);
                    target.dispatchEvent(newEvent);
                }
            }
        };
    })());

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants