Cancel event triggering (blur) from another element event (click)

Question

I have some lines with text that I can “edit” by replacing the inline line with an input that receives the text from the line as an attribute of the value.

When an input loses focus, the previous text is restored.

When you press return (keyCode 13), the new text is saved and will be written to the line.

Now, for users who do not know to press return to save the text, I want to add the "Save" button next to the input field. But when you click on it, the input field blur event is first triggered, discarding the changes.

So, is there an easy way for the .click () event of a button to cancel the .blur () event in the input field? Perhaps “do not execute other events” or I can see in the blur event, what events will be triggered next to its cancellation?

Here is jsfiddle to understand what I mean: http://jsfiddle.net/ykY5X/ (I work in Firefox (last night) where the button does not work. I just tested jsfiddle also in chrome, where the keyboard also does not work .)

$('#showEdit').click(function() { $('#row').data('text',$('#row').text()); $('#row').html('<input type="text" id="editInput" /> <span id="editSave">Save</span>'); $('#editInput').val($('#row').data('text')).focus(); }); $('#row').delegate('#editInput','keyup',function(e) { e.stopPropagation(); var keycode = e.keyCode || e.which; if (keycode == 13) $('#editSave').click(); }).delegate('#editSave','click',function(e) { e.stopPropagation(); $('#row').text($('#editInput').val()); }).delegate('#editInput','blur',function() { $('#row').text($('#row').data('text')); }); 

Answer 1

My final working solution is the following:

 $('#showEdit').click(function() { $('#row').data('textOriginal',$('#row').text()); $('#row').data('textSave',$('#row').text()); $('#row').html('<input type="text" id="editInput" /> <span id="editSave">Save</span>'); $('#editInput').val($('#row').data('textOriginal')).focus(); }); $('#row').delegate('#editInput','keyup',function(e) { e.stopPropagation(); var keycode = e.keyCode || e.which; if (keycode == 13) { $('#row').data('textSave',$(this).val()); $('#editSave').click(); } }).delegate('#editSave','mousedown',function() { $('#row').data('textSave',$('#editInput').val()); }).delegate('#editSave','click',function(e) { e.stopPropagation(); if ($('#row').data('textOriginal') == $('#row').data('textSave')) { $('#row').text($('#row').data('textOriginal')); return; } $('#row').text($('#row').data('textSave')); }).delegate('#editInput','blur',function() { $('#editSave').click(); }); 

http://jsfiddle.net/RSUdx/

Answer 2

I think you can try this:

 $('#showEdit').click(function() { $('#row').data('text',$('#row').text()); $('#row').html('<input type="text" id="editInput" /> <span id="editSave">Save</span>'); $('#editInput').val($('#row').data('text')).focus(); }); $('#row').delegate('#editInput','keyup',function(e) { e.stopPropagation(); var keycode = e.keyCode || e.which; if (keycode == 13) $('#editSave').click(); }).delegate('#editSave','click',function(e) { e.stopPropagation(); $('#row').text($('#editInput').val()); }).delegate('#editInput','blur',function() { if($('#editSave').click()) $('#row').text($('#editInput').val()); else $('#row').text($('#row').data('text')); }); 

Answer 3

You can use some delay before the code inside the blur event handler is executed. When you click the "Save" button, you can cancel the blur timer so that it is not executed.

Job demonstration

 var blurTimer; $('#showEdit').click(function() { $('#row').data('text',$('#row').text()); $('#row').html('<input type="text" id="editInput" /> <span id="editSave">Save</span>'); $('#editInput').val($('#row').data('text')).focus(); }); $('#row').delegate('#editInput','keyup',function(e) { e.stopPropagation(); var keycode = e.keyCode || e.which; if (keycode == 13){ $('#editSave').click(); } }).delegate('#editSave','click',function(e) { clearTimeout(blurTimer); $('#row').text($('#editInput').val()); }).delegate('#editInput','blur',function() { blurTimer = setTimeout(function(){ $('#row').text($('#row').data('text')); }, 200); }); 

Answer 4

.unbind allows you to unbind. docs ]

EDIT

Use keydown instead of keyup