Question

I have appended a div to my body

$('<div id="container"><img class="large" src="'+ img +'" /><a href="#">previous</a> | <a href="#" class="next">next</a></div>').appendTo('body').hide().fadeIn();  

But i cannot interact with the elements that i;ve added if i try something like

$('a.next').click(function(){
    $(this).remove();
    });

it doesn’t work .. how can i make jquery take notice of the appended elements ?

Answer 1

Use .live() to recognize current and future elements matching the selector, like this:

$('a.next').live('click', function(){
  $(this).remove();
});

Why doesn’t it work currently? This part: $('a.next') says “find <a class="next"> that exist”, then do something to them…but those links you’re dynamically adding don’t exist at that time, they’re created later, so you need a different approach.