Jquery .append() problem with modal view

Question

I created simple modal view photo gallery that gets picture where user clicked and shows it in modal view.It works but problem if user clicked 2 or 5 times while model view opens then it shows 2 or 5 the same images in modal view. I used like

$('.popup_block').find('div#userPhoto').append($theImage.clone());

How can I limit it ?

Here is my function that catch user click action. Loading function that creates modal view and so on.And it takes 2-3 seccond

$(this).bind('click',function(){
var $this=$(this);

loading($this);

});

Answer 1

Instead of .append() which appends content, use .empty() first or .html() which replaces it:

$('.popup_block').find('div#userPhoto').html($theImage.clone());

For those doing a double take, this isn't what it looks like, what's really happening with .html() above is a shortcut for this:

$('.popup_block').find('div#userPhoto').empty().append($theImage.clone());

Answer 2

Have you tried unbind?

Put an unbind inside the loading() function so that successive clicks don't invoke the process. -

$("#element").unbind('click'); 

Where #element is the identifier of the element on which you are calling the bind()