JQuery Change event not triggering

Question

My change function works great for select controls that are built into the page initially, but when I dynamically add a select control, the change function won't fire.

<select name="SUBJ" class="SUBJ" id="SUBJ_-9">
   <option value="1">First item</option>
   <option value="2">Second item</option>
</select>

$j('.SUBJ').change(function () {

    alert("foo");

}

I'm wondering after I dynamically add the control:

$j("tbody > tr:last").prev().before(strAppend);

do I need to call any function to associate the event watcher/handler with the control?

Any other ideas? Tks!

Answer 1

you need to bind the event.try like this:

$j('body').on('change','.SUBJ',function() {

    alert("foo");

});

Answer 2

Because you are generating HTML dynamically with Jquery, so try event delegation as shown :-

$j('body').on('change','.SUBJ',function() {
    alert("foo");
});

OR

$j(document).on('change','.SUBJ',function() {
    alert("foo");
});

Reference.

Answer 3

Your syntax is a little off, you're missing a ')' at the end. It should look like

$j('.SUBJ').change(function () {

     alert("foo");

});