Problem with jquery blur() event on Div element
I have problem hiding certain popup wich are based on divs. when i click out side those divs they dont hid. Here is the sample code what i m doing..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../JS/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#MainCanvas div").blur(function()
{
alert("blured");
});
});
</script>
</head>
<body>
<div id="MainCanvas" style="width: 400px; height: 350px; border: solid 1px black;">
<div class="ui-widget-content" style=" vertical-align:middle; height:60px; border: solid 2px black; width:300px;">
Drag me around
</div>
</div>
</body>
</html>
Answer
If I remember correctly, only A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA create focus/blur events. If you want to hide the popup by clicking outside it, you have to for example listen to click events on document and check if the event occured inside or outside the popup.
Sample code:
$(document).click(function(e){
if($(e.target).is('#MainCanvas, #MainCanvas *'))return;
$('#MainCanvas').hide();
});