Question

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

我做的是：

在输入框中输入一些值
只需点击标签即可运行模糊事件（状态已更改为已保存）
更改值，然后单击转义（输入已删除但状态又恢复为已保存且未取消）

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

查看我的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

如果您执行以下操作，则不会！

$('#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

Answer 2

Demo

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

$('#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");
});

Answer 3

输入失去焦点时会触发blur事件。您需要使用keypress事件来获取ESC键事件。

在keypress转义时jQuery取消事件

3 个答案:

Demo