在keypress转义时jQuery取消事件

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.

从我的小提琴中的示例中，您将看到我尝试一旦用户单击按钮转义它将显示div状态为取消。

What I did was :

我做的是：

1. enter some value in the input box
2. 在输入框中输入一些值
3. just click on tab to run blur event (status is changed to saved)
4. 只需单击选项卡即可运行模糊事件（状态更改为已保存）
5. change the value and then click on escape (the input is remove BUT the status is back to saved and not cancel)
6. 更改值，然后单击转义（输入删除但状态返回保存而不取消）

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.

我知道它在转义事件的if语句下运行代码，但之后它仍然转到blur事件并将状态更改为已保存。

See my Fiddle

看我的小提琴

HTML:

HTML：

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

jQuery:

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();
      }    
    });  
  });                                        
});

3 个解决方案

#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

这是一个分叉的演示

#2

Demo

It's the onblur event that's causing your problem. When the textbox is removed, it triggers the onblur which sets the label to "saved". You can amend this by adding a "canceled" class to the textbox and only save if not canceled

这是造成问题的onblur事件。删除文本框后，它会触发onb​​lur，将标签设置为“已保存”。您可以通过在文本框中添加“已取消”类来修改此项，并且仅在未取消时保存

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

$('#input').live('blur', function(e){
        $('#status:not(.canceled)').html("saved");
});   

#3

The blur event fires when an input loses focus. You will need to use the keypress event to pick up the ESC key event.

当输入失去焦点时，模糊事件将触发。您需要使用按键事件来获取ESC键事件。