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

当绑定click-handler时，由于类.scretch的元素不存在，“click”事件也不会触发。要解决此问题，您可以在创建元素后绑定click-handler，也可以将click-handler绑定到document-element。

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

Answer 2

问题是.stretch是动态创建的元素。直接事件不绑定到动态元素。因此，请替换下面的.stretch点击事件。

$('body').on('click','.stretch',function(){
    $(this).remove();
});

Answer 3

这是一个例子： http://jsfiddle.net/yfukm8kh/

<button class="thumbnail" >my button</button>
<div class="header"></div>
<script>
    $(document).ready(function(){
        $('.thumbnail').click(function()
            {
            $('<img class="stretch" src="http://read.pudn.com/downloads183/sourcecode/graph/texture_mapping/857705/edge&corner/lenna__.jpg">').insertAfter('.header');
            });
        $(document).on('click','.stretch',function()
            {
            $(this).remove();
            });
    });
</script>

查找绑定dom元素以获取更多详细信息，例如Event binding on dynamically created elements?

再次删除添加的图像

3 个答案: