Inline-editing: onBlur prevents onClick from being triggered (jQuery)

Question

Hello StackOverflow community!

I'm currently working on my own jQuery plugin for inline-editing as those that already exist don't fit my needs.

Anyway, I'd like to give the user the following (boolean) options concerning the way editing is supposed to work:

• submit_button
• reset_on_blur

Let's say the user would like to have a submit button (submit_button = true) and wants the inline input element to be removed as soon as it loses focus (reset_on_blur = true). This leads to an onClick handler being registered for the button and an onBlur handler being registered for the input element.

Every time the user clicks the button, however, the onBlur handler is also triggered and results in the edit mode being left, i.e. before the onClick event occurs. This makes submitting impossible.

FYI, the HTML in edit mode looks like this:

<td><input type="text" class="ie-input" value="Current value" /><div class="ie-content-backup" style="display: none;">Backup Value</div><input type="submit" class="ie-button-submit" value="Save" /></td>

So, is there any way I could check in the onBlur handler if the focus was lost while activating the submit button, so that edit mode isn't left before the submit button's onClick event is triggered?

I've also tried to register a $('body').click() handler to simulate blur and to be able to trace back which element has been clicked, but that didn't work either and resulted in rather strange bugs:

$('html').click(function(e) { // body doesn't span over full page height, use html instead

 // Don't reset if the submit button, the input element itself or the element to be edited inline was clicked.
 if(!$(e.target).hasClass('ie-button-submit') && !$(e.target).hasClass('ie-input') && $(e.target).get(0) != element.get(0)) {  
  cancel(element);
 }
});

jEditable uses the following piece of code. I don't like this approach, though, because of the delay. Let alone I don't even understand why this works. ;)

input.blur(function(e) {
 /* prevent canceling if submit was clicked */
 t = setTimeout(function() {
  reset.apply(form, [settings, self]);
 }, 500);
});

Thanks in advance!

Answer 1

Bind the submission to the mousedown/ keydown event instead of the click; they both fire BEFORE blur. You can then cancel or nullify the blur event if required, using unbind, or class checking etc.

Edit: This won't work if you tab to the button unfortunately, so it's probably not the ideal way...