How do you bind newly added element without event like click, focus, etc?

Question

For example if I want to bind datepicker to a newly added element. I could simply do this

$('body').on('focus', '.datepicker', function(){
    $(this).datepicker();
});​

but what if I don't want to use focus, I simply want to bind every element with .datepicker class on load. Is this possible?

Answer 1

After adding the elements dynamically, run code converting any that don't already have datepickers into ones that do. jQuery's datepicker adds a .hasDatepicker class when it initializes, so:

// After adding elements
$(".datepicker:not(.hasDatepicker)").datepicker();

If you really want to autmate it (perhaps you're not in control of the code that's adding the elements), you can use a MutationObserver on modern browsers (and polling on non-modern browsers; repeating the above every 50ms isn't going to add any significant overhead to your page).