javascript - 再次删除添加的图像

Question

我试图在单击缩略图时添加全尺寸图像。当我在第二个点击函数中将类更改为 .thumbnail 时，它成功删除了缩略图。我试过用 .thumbnail 类而不是 .stretch 添加图像，这确实有效，但再次点击它们后它们并没有消失。

此代码添加图片，但在再次单击图片时不会将其删除。

$('.thumbnail').click(function(){
    $('<img class="stretch" src="_DSC1671.jpg">').insertAfter('.header');
});
$('.stretch').click(function(){
    $(this).remove();
});

此代码成功删除了缩略图。

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

此代码添加与原始缩略图具有相同属性的图片，当点击它们时删除原始缩略图但不删除添加的缩略图。

$('.thumbnail').click(function(){
    $('<img class="stretch" src="_DSC1671.jpg">').insertAfter('.header');
});
$('.thumbnail').click(function(){
    $(this).remove();
});

所以我不确定我在这里做错了什么。显然，这与图像是在回顾中添加的事实有关。

提前感谢您的帮助。

Answer 1

当您绑定(bind)点击处理程序时，由于类 .scretch 的元素不存在，因此“点击”事件也不会触发。要解决此问题，您可以在创建元素后绑定(bind)点击处理程序，或者将点击处理程序绑定(bind)到文档元素。

   $(document).on("click", ".scretch", function() {
     $(this).remove();
   });