My application has dynamically added Dropdowns. The user can add as many as they need to.
I was traditionally using jQuery's live() method to detect when one of these Dropdowns was change()ed:
$('select[name^="income_type_"]').live('change', function() {
alert($(this).val());
});
As of jQuery 1.7, I've updated this to:
$('select[name^="income_type_"]').on('change', function() {
alert($(this).val());
});
Looking at the Docs, that should be perfectly valid (right?) - but the event handler never fires. Of course, I've confirmed jQuery 1.7 is loaded and running, etc. There are no errors in the error log.
What am I doing wrong? Thanks!
The on documentation states (in bold ;)):
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to
.on().
Equivalent to .live() would be something like
$(document.body).on('change', 'select[name^="income_type_"]', function() {
alert($(this).val());
});
Although it is better if you bind the event handler as close as possible to the elements, that is, to an element being closer in the hierarchy.
Update: While answering another question, I found out that this is also mentioned in the .live documentation:
Rewriting the
.live()method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:$(selector).live(events, data, handler); // jQuery 1.3+ $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(document).on(events, selector, data, handler); // jQuery 1.7+