Jquery event . change running when loading the page?

Question

I have a Jquery responsible for popular a select based on the value of another select, solved the issue successfully using the following code:

    $("#tipoProcedimento").change(function(){

    $("#procedimento").empty();
    $("#procedimento").attr("disabled", true);


    $.ajax('http://localhost:8000/backoffice/agendamentos/procedimentos-grupos/'+$(this).val()+'/procedimentos',  
    {
        success: function (data) 
        {
            console.log(data);
            $("#procedimento").empty();

            $("#procedimento").append($("<option />").val('').text('SEM PROCEDIMENTO ESPECIFICO...'));

            $.each(data.procedimentos, function() {
                $("#procedimento").append($("<option />").val(this.nr_seq_proc_interno).text(this.desc_procedimento_busca1));
            });

            $("#procedimento").attr("disabled", false);
        },
        error: function (data)
        {
            console.log('err -> '.data)
            $("#procedimento").attr("disabled", true);
        }
    });
})

However, today I need to use the same code on another page for 4 different selects, which led me to the conclusion that the best way to do this, would be to transform the names of the respective selects into variables in order to NOT REPEAT CODE xD... So I would be able to call the function for each select as follows:

    $("#tipoProcedimento").change(carregarProcedimentos('#procedimento','#tipoProcedimento'))
    $("#select2").change(carregarProcedimentos('#selectSecundario2','#select2'))
    $("#select3").change(carregarProcedimentos('#selectSecundario3','#select3'))
    ...

But when calling the function this second way, for some reason it is triggered as soon as the page loads, behavior of which did not happen in the previous way !!! And frankly, I’m confused to understand why this... I thought it had something to do with calling the function asynchronously, I couldn’t solve it this way either... so here I am (:

Answer 1

In doing so, as stated in the question:

$("#tipoProcedimento").change(carregarProcedimentos('#procedimento','#tipoProcedimento'));

You are running the function carregarProcedimentos as soon as the page is loaded.

But this way:

$("#tipoProcedimento").change(carregarProcedimentos);

You are referencing the event callback to the function carregarProcedimentos, and not running it. However you need to pass parameters ('#procedimento','#tipoProcedimento') function. You can do it in two ways:

$("#tipoProcedimento").change(function(){
   carregarProcedimentos('#procedimento','#tipoProcedimento');
});

In the function receives so:

function carregarProcedimentos(param1, param2){
   console.log(param1); // #procedimento
   console.log(param2); // #tipoProcedimento
}

Or:

$("#tipoProcedimento").change(['#procedimento','#tipoProcedimento'], carregarProcedimentos);

In the latter case, you will be sending an array to the function, and you should take the values this way:

function carregarProcedimentos(params){
   console.log(params.data[0]); // #procedimento
   console.log(params.data[1]); // #tipoProcedimento
}

The estate data returns what was sent as data by the event.