window.click event issue in JQuery

Question

I have a common scenario in which when clicking the window dismisses a popup div. The code I use is

   $(window).load(function (){
   $('.popupstyle').live("click", function(e){
       return false;
    });
    });
   $(document).ready(function(){
   $(window).click(function(){
   $('.popupstyle').hide();
    });
  });

but the problem is that no postback event of controls Like LinkButton is working on popup div then. return false in click event of the popup div creates a problem.It fuses everything on popuop div. Don't understand what to do fixing one thing disturbs the other. also the live event does not work on first click. Any suggestions

That's a common issue, look at this one http://stackoverflow.com/questions/757232/jquery-ui-dialog-with-asp-net-button-postback — Amir, Sep 28 '12 at 05:14

Sushanth -- · Accepted Answer · 2012-09-28T05:31:31.383

0

The cause of this is event bubbling , where the event from the child element bubbles to the parent element..

One way of preventing this is to use e.stopPropagation() when you encounter the target element

CHECK FIDDLE

edited Sep 28 '12 at 05:31

answered Sep 28 '12 at 05:16

Sushanth --

55,259
9
66
105

Fresheyeball · Answer 2 · 2012-09-28T05:58:40.897

@sushanth is right. Its because of event bubbling, which is an important core js concept. And while it can trip you up in situations with 2 listeners ($('.popupstyle').live("click", $(window).click) we can also use bubbling to our advantage and perform the same task with a single listener ($(window).click).

  $(window).click(function(e){
       if( ! $(e.target).hasClass('popupstyle') ){ $('.popupstyle').hide(); } 
  });

DEMO

window.click event issue in JQuery

2 Answers2