Remove jQuery generated content with on() -

Remove jQuery generated content with on() -

i have markup this:

<div class="large-image"> <img src="foo.jpg" class="original-size"> <--this persists <img src="foo-fullsize.jpg" class="zoomed"> <--injected jquery zoom plugin <img src="bar-fullsize.jpg" class="zoomed"> <--also injected </div> <div class="thumbnails"> <a href="foo-fullsize.jpg" class="thumb"><img src="foo-thumb.jpg"></a> <a href="bar-fullsize.jpg" class="thumb"><img src="bar-thumb.jpg"></a> </div>

i have code like:

$(window).load(function() { $('a.thumb').click(function(){ $('#main-image').zoom({url: this.href}); // jquery zoom }); });

every time click thumb link, zoom plugin injects new image <div class="large-image"> container. able remove existing images class zoomed before new 1 created. know need utilize on() accomplish this, can't seem work generated images.

this should it:

$(window).load(function() { $('a.thumb').on('click', function() { $('img.zoomed', this).remove(); }); });

this remove .zoomed images relative thumbnail clicked. if want target every .zoomed image on page, you'll want drop context:

$('img.zoomed'). edit

i didn't realise generated content. give whirl:

$(window).load(function() { $(document).on('click', 'a.thumb', function() { $('img.zoomed').remove(); }); });

jquery