Jquery UI button on items added after page load

Question

i have the jquery ui button widget working w/ the following code.

$(.remove_img).button({ icons: { primary: 'ui-icon-cancel' } });

but if there isn't an image in place, on upload, i am appending a button with class .remove_img, so it isn't in the DOM on page load. is there a way to get it so that the added button will still trigger the same .button code?

i tried

$('.remove_img').live('click', function(event){
 $(this).button({
  icons: {
   primary: 'ui-icon-cancel'
  }
  });
 });

but it didn't get me anywhere.

Answer 1

live() should be exactly what you need. Can you do something very simple in the callback to verify whether it is getting bound or not? How are you generating the elements later? Are you using jQuery's append() to do it?

Using live and then append should work just fine, it's pretty much the most basic example of how to use live, so something else is going on here.