addEventListener not fires change event of element

Question

I have selectbox, after page loads selected item changed(via ajax call) and I need to catch this event, so I added this;

 $(document).ready(function() {
                document.getElementById("mySelectBox").addEventListener("change", function() {
                    debugger
                }, true);
            })

and expected when selected item changed async it triggers and step into the function inside listener but its not...

This can be solved using setTimeOut function, but its ugly and as you know there is possible side effects.

setTimeout(function(){*business logic*},2000)

@Merigold lol, I just skipped content of BL to make post clear — TyForHelpDude, Feb 22 '18 at 08:25
Is it a part of the page that you load dynamically, by using AJAX for example? — Victor M Perez, Feb 22 '18 at 08:37
@VictorHerasmePerez yes, this is why your answer not works :( — TyForHelpDude, Feb 22 '18 at 08:44
Then you should use the `on()` method. I will edit the answer — Victor M Perez, Feb 22 '18 at 08:45
I dont think it would work as well, it just triigers only element changed by UI not async action — TyForHelpDude, Feb 22 '18 at 08:50

Victor M Perez · Answer 1 · 2018-02-22T16:30:29.963

If you are adding elements dynamically by using AJAX, use the on() method. Let's say there is a div (the-parent-div) which contains #mySelectBox:

$(document).ready(function() {
    $('the-parent-div').on('change', '#mySelectBox', function(){
         //Your actions go here
    });
});

UPDATE: You might be referring to the async nature of ajax calls. See this Question and the accepted Answer:

....... The A in Ajax stands for asynchronous . That means sending the request (or rather receiving the response) is taken out of the normal execution flow. In your example, $.ajax returns immediately and the next statement, return result;, is executed before the function you passed as success callback was even called. .....

While they could bind the event listener using jQuery, that wouldn't solve the problem. — Quentin, Feb 22 '18 at 08:35

score 1 · Answer 2 · answered Feb 22 '18 at 08:29

1

There is a missing ) at the end of the code

answered Feb 22 '18 at 08:29

gldanoob

762
1
7
18

1

Questions where the problem is caused by a typo are off-topic. They should be closed and not answered. When you have more reputation you'll be able to comment on any question and vote to close them. In the meantime, please don't *answer* off-topic questions. – Quentin Feb 22 '18 at 08:33

Quentin · Answer 3 · 2018-02-22T08:54:17.767

First, you have a typo in your code. You forgot the ) at the end, but I assume that is a transcription error.

The change is event is fired when the user interface is used to change the form control.

You said "when selected item changed async" which implies that you are changing the form control using JavaScript and not by a user interaction event.

This won't trigger the event.

You can either call the function manually…

 $(document).ready(function() {
     function changefunction() {
         debugger
     }
     document.getElementById("mySelectBox").addEventListener("change", changefunction, true);
     do_something_to_change_mySelectBox();
     changefunction.call(document.getElementById("mySelectBox"));
 });

… or make use of jQuery's event abstraction features. This would require that you bind the event handle using jQuery though.

 $(document).ready(function() {
     $("#mySelectBox").on("change", function() {
         debugger
     });
     do_something_to_change_mySelectBox();
     $("#mySelectBox").trigger("change");

 });

Oops. Typo. Fixed. And live demo: http://jsbin.com/xelasutade/1/edit?html,js,output (and make sure your debugging tools are open!). — Quentin, Feb 22 '18 at 08:54

addEventListener not fires change event of element

3 Answers3