Reinitialize JQuery After AJAX Call

I'm having a problem where after dynamically populating an element via AJAX, my jQuery functions aren't working on the new content. I have a list of files for example that is popul

Solution 1:

The problem is that you are only attaching .on() to the ".file" elements that exist initially. You just need to attach the .on() to the document and supply the selector as an option. e.g.

$(document).on('dblclick', '.file', function(event){
    alert($(this).html());
});

That way the event will be attached to future elements of class "file".

Solution 2:

jQuery.on bind to elements already in the DOM. If you need bind to future elements, you can use jQuery.live or unbind and rebind with jQuery.on again. The former is easier.

$('.file').live('dblclick', function(event){
    alert($(this).html());
});

EDIT: As mentioned, live is deprecated and slow. Always prefer on.