Question

Here is what i am trying to do:

-When click on image, unbind the click event (on that image) and show popup.

-As long as the popup is shown, you can not click on that image.

-Once the popup is dismissed, the click event is bound again on the image.

So this is my code in order (the image is contained in li tag).

$('li').click(clickOnImage());//Bind the click event with call to clickOnImage method

function clickOnImage(){
  var id=$(this).attr("id");
  console.log('you selected image with id name: '+id);
  showWithAnimation();//Show the popup with animation
}//End function



           function showWithAnimation(){    

                   console.log('animation called');

                   $('#popup').show();



                   $("#popup").css({"top": "10%", "left": "30%"}).animate({top:(($(window).height()/2)-($('#popup').outerHeight()/2))-10}, 1000, 'easeOutBounce').show();

    //As long as the popup is shown, Unbind the click event on images
                   $('li').unbind('click');
}//End function


     function hidePopUp(){

          $('#popup').hide();
           $('li').bind('click',clickOnImage());//if popup is hidden, re-bind the click event and here is the issue!

      }//End function

I got this error in the console when running on FireFox:

Unexpected end of file while searching for selector.  Ruleset ignored due to bad selector.

I think the problem is that the function is getting called recursively. But i need to perform such approach. How can i fix that please. Thanx in advance.

Answer 1

You are binding the click wrong. You are calling the function, not assigning it. [done in multiple places]

$('li').click(clickOnImage());

needs to needs

$('li').click(clickOnImage);

You also have the problem when you are binding to hide.

In reality, you do not need to bind/unbind. functions. Just use the state of the element to figure out if you need to hide or show.