JavaScript trigger event inside loop

Question

I am trying to repopulate a form with previously stored values, issue is that many of the select boxes are loaded dynamically with ajax and there are other functions bound to the change "event" that populate select boxes based on previous selection.

• My issue is that for some reason I can't get the .trigger("change") to work so my select boxes do not get populated and I have the code to bind onchange once a box is populated but cant get the first box to fire the changed event. If I enter $("#mybox").trigger("change") in browser console it works but not while inside js.

The values get set alright but event never gets triggered

selectBox.val(this.selectedValue).prop('disabled', this.disabled).trigger("change");

function repopulateForm(data){
     $(data).each(function () {
                switch (this.type) {
                    case "input":
                        $("#" + this.id).val(this.value).prop('disabled', this.disabled);
                        break;
                    case "checkbox":
                        $("#" + this.id).prop('checked', this.isCheckedBox).prop('disabled', this.disabled).trigger("change");
                        break;
                    case "select":
                        var selectBox = $("#" + this.id);
                        //Check if the select box has options
                        if (selectBox[0].length > 1) {/
        
                            if (this.disabled == false) //ignore disabled 
                                selectBox.val(this.selectedValue).prop('disabled', this.disabled).trigger("change");
                        }
                        else {
                            //Bind to element untill its filled
                            $(selectBox).one("change", this, function (event) {
                            data=event.data;
                                $("#" + data.id).val(data.selectedValue).prop('disabled', data.disabled).trigger("change");;
                            });
                            var test;
                        }
                        break;
                }
            });  
     };

This is how form looks initially:

After I select a value the change event gets triggered and next box gets populated dynamically with options, and now it is enabled and has options. My issue is that I can't trigger the change event programmatically so next box can get populated.

Answer 1

The whole approach is a bit funky as i'm not sure what your trying to accomplish. That said however, binding should be done on an dom element that's a parent of dynamically added elements or higher still. For instance on the "document" object - that's because listeners are set when the dom is constructed the first time. So we have:

$(myElement).on('event',function(e){ doSomethingHere}); - myElement will not trigger callback

vs

$(document).on('event', 'myElement', function(e){ doSomethingHere }). - myElement will trigger callback

First approach will not trigger callback and subsequent events bound to it. Second one will. I may be wrong, but i suspect that's what you're trying to do.