Jquery simple model view problem

Question

I am trying to make little photo gallery with help of model view. But when I click on photo model views opens and shows photo but also it deletes it from photo gallery.I used append to create on model viev user information.

 <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>

this is my .js file

  $(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

Calling .append() in your situation will actually move the image, which is what you're seeing with this:

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

Instead you want to append a copy, so use .clone() or .clone(true) here (since there are event handlers bound), like this:

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

If you do want the behavior from that .hover() call in the #popup_name copy, use .clone(true), but I assumed you didn't want that here.