在document.body上的Click事件无法在IE8上正常运行

Question

I'm working on some tweaks for a webpage, I'm using MVC and jquery.

Basically I have some help icons on my page, when the user clicks on the icon, a bubble appears with a help description.

I have this code in my javascript for that page:

AddHelpIconMouseEvents: function(element, msg, divForm) {
   $(element).live('click', function(event) {
      if (event.type === "click") MyClassHelper.showHelpIconBubble(msg, divForm, event);
   });
   $(document.body).click(function() { $(divForm).hide('fast'); });            
}

As you can see I'm using the document.body.click event to capture any click outside the help bubble, and hide the bubble.

Now consider this situation, I click on the help icon and the bubble is displayed, if I click anywhere else on the page, the bubble disappears as expected, but the problem I have is, if instead of clicking on a blank space on the page I click on a link, the link displays another section of the page, hides the section that contained the help icon but the help bubble does not disappear, it remains displayed.

This doesn't happen on Firefox, in which I can click on a link or on an empty space and the bubble disappear.

I think this may be related to the way in which IE handle events, I think I read something about it, so I wonder if anyone knows how can I fix this, I think I can put some code on the links and validate if the bubble is visible, hide it, but I don't like the idea, I think it is not a good solution, I wonder if there is another better way to handle this.

Thanks,

Answer 1

You can make a function which checks for the help bundle to check in DOM if it already exists. If so remove it from DOM. You have to call this function on every other link.