Adding events to dynamically created objects

Question

I've created a function where all drop downs on the page with the class ".dropdown" do something when changed. However adding subsequent dropdowns dynamically do not trigger the event. How can I make the dynamic dropdowns trigger the change event?

$(".dropdown").change(function () {
    //Do Something
});

Answer 1

You can use event delegation to attach change event for dynamically created .dropdown elements:

$(document).on('change', ".dropdown", function() {
    //Do Something
});

Answer 2

$(document).on('change', '.dropdown', function () {
    //Do Something
});

Structure is like

$(static selector / parent).on('event', 'dynamically added element*', function () {
    //Do Something
});

*also includes the currently existing ones

Answer 3

use event delegation:

 $(document).on('change','.dropdown',function () {
//Do Something
});

Answer 4

try

$(".dropdown").live("change", function () {
            alert(1);
         });