jQuery: clone elements AND events

Question

Whenever I use ajax to dynamically create new content, .clone(), append() etc, the new element looses any triggers and events I programmed =(

After making copy, simp

Answer 1

If your handlers are setup using something like $('.class').click( ... )

Try something like this instead: $('.class').live('click', ...)

Live applies to elements with the class that may not exist yet.

Answer 2

Hi I'm having a bit similar use case, I have some dynamically generated content that contains a button, click event is responding to the original button but not the generated one, I've done before :

$('.someclass').on('click', function() {

but i resolved my problem by replacing the on by live like this :

$('.someclass').live('click', function() {

Answer 3

I finally got the UI datepicker to work properly. I had to completely remove datepicker BEFORE cloning and add it AFTER cloning elements. The guys at UI should make it easier for us. Go figure!

Just before cloning:

//#datepicker
$("input[name='date']").datepicker( "destroy" );
$("input[name='date']").removeClass("hasDatepicker").removeAttr('id');

After cloning:

$("input[name='date']").datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, numberOfMonths: 3, showButtonPanel: true});

Answer 4

.clone( true ) does the trick.

Documentation: http://api.jquery.com/clone/