Question

我尝试在点击时为图像添加div和span，然后在跨度点击时将其删除。

   <div id="gallery" align="center">    

        <img  src="http://www.frontpagejunky.com/wp-content/uploads/2011/05.jpg" class="img-view" width="150px" height="150px" />
</div>

jquery：

           $(document).ready(function(){
              $('.img-view').click(function(){
                  var img=$(this).after('<span id="close">X Close</span>').wrap("<div id='pop-up' style='display:block'/>").clone();
                  $('#gallery').append(img);
              });

             $('#close').live("click",function(){
                 $('#pop-up').remove();
                  $('#close').remove();

             });

       });
    </script>

我遇到的问题是，跨度不会包含在div中，而只会包含图像，并且仅在图像被包装后才会附加跨度。第二个问题是当我单击#close时，div和按钮消失，但是当我再次单击.img-view时，它们不会重新生成/重新出现。为什么会这样？

更新

        $(document).ready(function(){
              $('.img-view').click(function(){
                  var img=$(this).clone();
                   img= img.after('<span class="close">X Close</span>');
                   img=img.wrap("<div class='pop-up' style='display:block'/>"); 
                  $('#gallery').append(img);
              });

             $('.close').live("click",function(){
                 $('.pop-up').remove();
                  $('.close').remove();

             });

       });

但是现在弹出div没有包装图像元素！？！

Answer 1

使用这个：

$('#gallery').append(img);

而不是：

$('#gallery').append($(img));

Answer 2

您的链接有点偏离，因为$(this).after('<span id="close">X Close</span>')返回$(this)（图像），所以$(this).after('<span id="close">X Close</span>').wrap("<div id='pop-up' style='display:block'/>")将div包围在图像周围然后返回{{1} }，$(this)返回$（this）的克隆

这可能会有所帮助

$(this).after('<span id="close">X Close</span>').wrap("<div id='pop-up' style='display:block'/>").clone()

修改

这不起作用的原因是因为#close上的点击处理程序被调用，因为它成为了.img-view的父级，为了防止这种情况，我添加了$(document).ready(function(){ $('.img-view').on('click', function(e){ $("<div id='pop-up' style='display:block'/>").appendTo('#gallery').append('<span id="close">X Close</span>').find('#close').append(this); event.stopPropagation(); }); $('#close').live("click",function(){ $(this).find('.img-view').appendTo('#gallery'); $(this).parent().remove(); }); });，也改变了代码所以文本stopPropagation()已被删除。

FIDDLE

Answer 3

您不能使用不在dom中的wrap元素。你可以创建一个新的元素作为你的包装器并将所有内容挂钩到该包装器，或者首先将你的img插入dom然后将其包装。

在使用X添加范围之前，您应该执行以下两个选项中的任何一个，首先是最佳选择。

jquery追加功能不起作用

3 个答案: