当前位置: 动力学知识库 > 问答 > 编程问答 >

Jquery simple model view problem

问题描述:

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;

});

});

网友答案:

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: