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());

如果您想要#popup_name副本中的.hover()来电，请使用.clone(true)，但我认为您不希望这里

Jquery简单模型视图问题

1 个答案: