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.

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — JJJ, Oct 10 '14 at 10:36

score 2 · Accepted Answer · edited May 23 '17 at 11:57

2

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

edited May 23 '17 at 11:57

Community

1
1

answered Oct 10 '14 at 10:34

Arun P Johny

384,651
66
527
531

Thanks. Worked like a charm. Would be a better practice to use .html() instead of replaceWith like Pierre-Chanel answered? – João Costa Oct 10 '14 at 10:50
@JonnyDevv yes... if you have control over the script that will be better – Arun P Johny Oct 10 '14 at 10:53

score 2 · Answer 2 · answered Oct 10 '14 at 10:40

2

I think you shouldn't use .replaceWith() function, because it replace all the element (remove it from the DOM). Use better .html(result) and change the result send by your server in order to have only <option> elements.

answered Oct 10 '14 at 10:40

KmeCnin

507
3
16

Jquery on change not working after post

2 Answers2