Inline-editing: onBlur prevents onClick from being triggered (jQuery)
- by codethief
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!
