Question

$(document).ready(function(){
    console.log("1");
    $('#selectid').triggerHandler('change');
    $('#selectid').trigger('change');
    $('#selectid').change();
    console.log("2");
    $('#intervention1-form').change(function() {
        console.log('WHY DOESNT THIS HAPPEN?');
  });
});
console.log("0");

Console output should be:

0
1
WHY DOESNT THIS HAPPEN?
2

But instead, it’s just:

0
1
2

The context is that I am populating an HTML element with different stuff when a select menu (selectid) is changed. However, when the page first loads, I want to trigger the select menu as if it is changed, so that the HTML element has content even if the user doesn’t change the select menu.

Answer 1

you attach a change handler with your console log in it, after you already triggered the change.

so you will catch only change events that happen from the moment you bind your change handler, not the ones that happened before that

changing up your code to this would solve the issue:

$(document).ready(function(){
    $('#intervention1-form').change(function() {
        console.log('WHY DOESNT THIS HAPPEN?');
    });
    console.log("1");
    $('#selectid').triggerHandler('change');
    $('#selectid').trigger('change');
    $('#selectid').change();
    console.log("2");
});
console.log("0");

now you have the output you desire, because you bound the change handler before triggering it.