Question

From the example in my Fiddle you will see that I’m trying to once the user click on the button escape it will show the div status as cancel.

What I did was :

1. enter some value in the input box
2. just click on tab to run blur event (status is changed to saved)
3. change the value and then click on escape (the input is remove BUT the status is back to saved and not cancel)

I know it runs the code under the if statement for the escape event but after that it still goes to the blur event and change the status to saved.

See my Fiddle

HTML:

<input id="input"/>
<div id="status">status</div>

jQuery:

$(document).ready(function() {
  $('#input').live('blur', function(e){
    $('#status').html("saved");
    $('#input').live('keyup', function(e){
      if (e.keyCode == 27) { 
        $('#status').html("cancel");
        $('#input').remove();
      }    
    });  
  });                                        
});

Answer 1

If you do the following it does not!

$('#input')
    .on('blur', function(e){
        $('#status').html("saved");  
    })
    .on('keyup', function(e){
        if (e.which == 27) { 
            $('#status').html("cancel");
            $('#input')
                .off('blur') // unbind the blur event
                .remove();
        }    
    });     

Here is a forked demo