Jquery on change not working after post

Question

I'm having a problem using .on() method after post. I have 3 dropdowns each one populated after first one changed. When i change first dropdown, the other ones are repopulated based on mysql database tables. The problem is the separated function for second dropdown doesn't work separately. Here's the html:

<div class="form-group row">
    <div class="col-md-4">
        <label for="inputIlha">Ilha</label><select name="ilha" class="form-control" id="inputIlha">
            <option value="1">Santa Maria</option>
            <option value="2">São Miguel</option>
            <option value="3">Terceira</option>
            <option value="4">Graciosa</option>
            <option value="5">São Jorge</option>
            <option value="6">Pico</option>
            <option value="7">Faial</option>
            <option value="8">Flores</option>
            <option value="9">Corvo</option>
        </select>
    </div>
    <div class="col-md-4">
        <label for="inputConcelho">Concelho</label>
        <select name="concelho" class="form-control" id="inputConcelho">
            <option value="0"></option>
        </select>
    </div>
    <div class="col-md-4">
        <label for="inputFreguesia">Freguesia</label>
        <select name="freguesia" class="form-control" id="inputFreguesia">
            <option value="0"></option>
        </select>
    </div>
</div>

And jquery function that repopulates all the dropdowns succesfully:

$("#inputIlha").on("change", function() {
    var inputIlha = document.getElementById("inputIlha").value;
    $.post(config.base + "xxxx/xxxxxx/xxx01", { ilha: inputIlha }, function(result) {
        $( "#inputConcelho" ).replaceWith(result );
        var inputConcelho = document.getElementById("inputConcelho").value;
            $.post(config.base + "xxxx/xxxxxx/xxx02", { concelho: inputConcelho }, function(result) {
                $( "#inputFreguesia" ).replaceWith(result);
            });
        //$( "#inputFreguesia" ).html('<option value="0"></option>');
        }
    );
});

This function repopulates the second (#inputConcelho) and third (#inputFreguesia) dropdown correctly. #inputFreguesia is repopulated successfully based on #inputConcelho.

The problem is when i want to change the #inputConcelho. The next function won't work.

$("#inputConcelho").on("change", function() {
alert("inputConcelho changed");
    var inputConcelho = document.getElementById("inputConcelho").value;
    $.post(config.base + "xxxx/xxxxxx/xxx02", { concelho: inputConcelho }, function(result) {
        $( "#inputFreguesia" ).replaceWith(result );
    });
});

I tried adding alert to see if any response but not success. I even tried this simply function:

$("#inputConcelho").click(function() {
    alert("inputConcelho changed");
});

Everytime i change first dropdown (#inputIlha) the dropdowns are all repopulated. But when i change just the second dropwdown (#inputConcelho), i get not alert or anything. Any idea what might be the problem? I even tried adding a class to second dropdown, and call it with that class without success. Hope i made myself clear.

Thanks in advance.

Answer 1

Since you are replacing the second select element, the handlers added to those elements are lost.

It is the same as Event binding on dynamically created elements?.

So you need to use event delegation here.

$("#inputConcelho").parent().on("change", '#inputConcelho', function () {
    alert("inputConcelho changed");
    var inputConcelho = document.getElementById("inputConcelho").value;
    $.post(config.base + "xxxx/xxxxxx/xxx02", {
        concelho: inputConcelho
    }, function (result) {
        $("#inputFreguesia").replaceWith(result);
    });
});

Instead of binding the handler to #inputConcelho, bind it to that element's parent