Why is focusout event triggered when clicking on div

Question

I have a div which I use as a textbox

<div class="field-wrapper">
     Name
     <div id="name" class="name" tabindex="-1">
         Enter a name
     </div>

And I want to detect focus and unfocus events of the div textbox.

$('.name').focus(function() {
    console.log("focused")
});

$('.name').focusout(function() {
    console.log("unfocused");
});

But, whenever I click on the div, both the focus and the focusout events are triggered. Why is that so?

Answer 1

Your code seems to be working fine. Here is the fiddle assuming you are wrapping it inside some kind of dom ready:

$(function(){
   $('.name').focus(function() {
    console.log("focused")
   });

  $('.name').focusout(function() {
    console.log("unfocused");
  });
});

http://jsfiddle.net/BkJLn/

Answer 2

Once I disabled jEditable which was applied to the div element, the problem was gone. So it seems that jEditable is somehow calling the focusout event when the element is focused.

That being said, my main purpose of using focus and focusout was to capture any changes the user had entered, which I should do using jeditable's functions.