How to bind change () function to dynamically created <select>?

Question

I am creating elements in the DOM by JS. The question is, how do I assign a .change () function to each newly created item?

Answer 1

Even better than that .live(), in terms of performance, .delegate(). This works the same way .live(): it uses something called a bubble event, which means that when an event is triggered in a DOM element, all parents of that element are notified of the event. delegatehowever, it has slightly better syntax and a significant performance advantage.

$('#parentElement').delegate('select.yourSelectClass', 'change', function() {
    // do your processing here
});

#parentElement , select, . document.body, , , DOM, , , .

select.yourSelectClass , yourSelectClass. , jQuery, .

Answer 2

jQuery.live() :

$('.yourSelectClass').live('change', function(event){
    // Handle the Change event here.
});

Answer 3

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

Answer 4

jQuery live. ( 1.3 )

$(".classOfJSCreatedElements").live('change',
function(event){
//do stuff
});

jQuery, livequery

: jQuery FAQ