How to update jEditable text field when user click mouse outside the form?

Question

I am working with jEditable plug-in. My question is that How can I detect when user click outside text field of jEditable?

When user clicks outside jEditable text field, still cursor stays in text field and nothing happens?

Edit:
My jEditable form looks like

<span class="edit">
    <form>
        <input/>
    </form>
</span>

Here is my current code

$(".edit").editable("path/to/url", {
    indicator : "saving...",
    type   : 'text',
    event  : 'custom_event',
    submitdata : function(value, settings) {
        return {
            _method   : "post",
            myId    : jQuery("#id").val(), //extra needed id
        };
    },
    select : true,
    onblur : 'submit',
});

'onblur' is working when I press {tab key} then it submits content of text field. But when I click mouse outside text field then nothing happens and text field stays as it.

I would like also to submit content of text field when user clicks outside that text field.

Answer 1

I just found working solution for my question and may it helps others...

$(document).mouseup(function (e) {
    var container = $(".edit");
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        if(container.find("form").length > 0) {
            container.find("form").submit();
        }
    }
});

I found this answer from one of SO Answer. So if anybody interested please have a look on link given.

Answer 2

The problem is event : attr which u setting "custom_event" it need to be some js events like click etc. that's why onblur is not working .. this the working solution --- Fiddle Demo

$(".edit").editable("path/to/url", {
 indicator : "saving...",
 type   : 'text',
 event  : 'click',
 submitdata :  function  (value, settings) {
      return {
       _method   : "post",
       myId    : jQuery("#id").val(), //extra needed id
    };  } ,
 select : true,
 submit: "Submit",
 onblur : function() {           
   $(".edit").find("form").submit();
  }                  
});

Answer 3

try focusout event instead/with blur.

Reference : http://api.jquery.com/focusout/