jquery简单模型视图问题

Question

我正在尝试在模型视图的帮助下制作小照片库。但是，当我单击照片时，模型视图会打开并显示照片，但也会从照片库中删除它。我使用附加在模型 viev 用户信息上创建。

 <div class="userList">
<div class="user" href="#?w=500" rel="popup_name"> <img src="style/images/category/1.jpg" /></div>
<div class="user" href="#?w=500" rel="popup_name"> <img src="style/images/category/2.jpg" /></div>
<div class="user" href="#?w=500" rel="popup_name"> <img src="style/images/category/3.jpg" /></div>
</div>

<div id="popup_name" class="popup_block">

    <div id="userPhoto"></div>
    <div id="description"></div>
</div>

这是我的 .js 文件

  $(document).ready(function(){

    $(".userList").children().each(function(idy) {


        var $this =$(this);


    $(this).hover(function () {
            var $this   = $(this);
                $this.stop().animate({'opacity':'1.0'},200);
            },function () {
            var $this   = $(this);
                $this.stop().animate({'opacity':'0.4'},200);
        }).bind('click',function(){


             var $theImage   = $(this);

        var popID = $(this).attr('rel'); 
        var popURL = $(this).attr('href'); 


        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; 

        //Fade in the Popup and add close button
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="style/images/logo.png" class="btn_close" title="Close Window" alt="Close" /></a>');


    $('#popup_name').append($theImage);


        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;


        $('#' + popID).css({
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });


        $('body').append('<div id="fade"></div>');
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

        return false;
    });
    });

     $('#popup_name > img').live('click',function(){
                $this = $(this);
                $('#description').empty().hide();


                   $this.remove();

            });


    $('a.close, #fade').live('click', function() {
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove(); 

        });
        return false;
    });


    });

Answer 1

在您的情况下调用 .append() 实际上会移动 图像，这就是您所看到的：

$('#popup_name').append($theImage);

相反，您想附加一个副本，因此使用 .clone() 或 .clone(true ） 在这里（因为绑定了事件处理程序），如下所示：

$('#popup_name').append($theImage.clone());

如果您确实想要来自 .hover() 在 #popup_name 副本中调用，使用 .clone(true)，但我以为你不希望在这里出现这样的情况。