change() for appended select doesn't work

Question

I\'ve jQuery function on change for a select element:

$(\"#category\").change(function(){
    $(\"table[id=advance_search]\").append(\"

        

Answer 1

The problem here is because change() (and all other event handler shortcuts) are bound on page load, yet your element is added dynamically well after this. Instead you need to use delegate() to attach the events to this element after it's appended.

$("tr[id=item_type]").delegate("select[id=type]", "change", function() {
    console.log("change");
});

Or, if you're using jQuery 1.7+ you can use on():

$("tr[id=item_type]").on("change", "select[id=type]", function() {
    console.log("change");
});

You may want to amend the select element you're appending here though, as it has an ID, which could be easily duplicated if it's appended multiple times, which would render the page invalid.

Answer 2

You need to subscribe with on() function, because when you subscribong with change element doesn't exists in DOM and jQuery can't find it.

$("select[id=type]").on('change', function(){
     console.log("change");
});

Answer 3

because you add it dynamicly you have to use the live or delegate event

$("select#type").live('change', function() {
    console.log('change');
});

Answer 4

try this:

$("select[id=type]").on("change",function(){
    console.log("change");
});

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

source:http://api.jquery.com/live/