jquery - 使用 on() 删除 jQuery 生成的内容

Question

我有一些像这样的标记:

<div class="large-image">
    <img src="foo.jpg" class="original-size"> <--This persists
    <img src="foo-fullsize.jpg" class="zoomed"> <--injected by 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>

我有一些代码，例如:

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

每次我单击拇指链接时，缩放插件都会将新图像注入(inject) <div class="large-image">容器。我希望能够在创建新图像之前删除所有已缩放类的现有图像。我知道我需要使用 on() 来完成此任务，但我似乎无法让它与生成的图像一起使用。

Answer 1

这应该可以做到:

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

这将删除与单击的缩略图相关的所有 .zoomed 图像。如果您想要定位页面上的每个 .zoomed 图像，您需要删除上下文:

$('img.zoomed').

<小时/>

编辑

我没有意识到这是生成的内容。尝试一下:

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