jQuery - cascading classes and on-click functions issues

Question

I have an issue with using jQuery for a pop-up window. I have a class called "clicker".

If you click it the "showHideBox()" function is being called:

$(".clicker").click(function(){
    showHideBox();
});

showHideBox function is showing box - $(".box").fadeIn(700) or hiding it when clicked again - $(".box").css("display","none") .

.box div is positioned fixed with high z-index to provide sort of light-box effect.

The .box div contains some clickable - interactive bits.

The .box div is quite big and it's partially overlapping the .clicker div .

the problem is that when you click an area of the .box div which is overlaping the .clicker div the jQuery is acting as if I was clicking the .clicker.

So it's actually taking listening to the .clicker functionality - even if i give the .box css("display","block") function.

Please advice if anyone knows a solution for this.

Many thanks in advance.

Answer 1

You can try adding a transparent div behind the box div which will cover entire screen. If it does not work, try to be clear about jQuery event bubbling. Let me know if any of these work.