Question

I am having trouble using the “.on” method in jQuery on content that has been inserted via AJAX. I currently use “.live”, however this is deprecated and “.on” is what I’m after.

My working code is:

$('.folderadmin').live("click", function() 
{   
   // Do stuff
})  

When I replace the .live with .on, it fails to work. I believe it is because the element .folderadmin is loaded via AJAX – thus why we needed to use .live to access it. How can I access the DOM and recognize .folderadmin with .on?

Answer 1

$('.folderadmin').live("click", function() {   
   // Do stuff
});

is same as

$(document).on("click", '.folderadmin', function() {
  // Do stuff
});

But it is not necessary to bind to document, you could bind to the parents container of .folderadmin which has already exists in the dom tree.

$('#the_parent_id').on("click", '.folderadmin', function() {
  // Do stuff
});