Jquery tools overlay not working properly on dynamically generated elements

Question

I don't know if this is a known problem or if I am just doing this wrong but when I open the JQuery Tools overlay on dynamically generated elements the close button doesn't work.

I tried 3 different combinations.

1.

$(document).on("click", "a[rel]", function() { $("a[rel]").overlay(); });

2.

$("a[rel]").overlay();
$(document).on("click", "a[rel]", function() { $("a[rel]").overlay(); });

3.

setting the .overlay() on document ready and in my add item event.

Any ideas why the close button isn't working? The overlay opens just fine for the new elements it's just nothing happens when I press close. There aren't any console errors either.

Thanks.

EDIT - I created a jfiddle but it's has it's own problems.

http://jsfiddle.net/TjQAQ/

Answer 1

Do it like this:

$(document).ready(function() {
   $('#add').click( function() { 
       $('<a rel="#overlay">New Overlay Trigger</a>').appendTo('body').overlay();
   }); 

   $("a[rel]").overlay();     
});

See working fiddle