Question

当用户输入 ESC 或 ENTER 时，我遇到问题。我想要做的是使用AJAX，jQuery编辑nick。

例如，我的HTML中有代码：

<div id="nick">Change Nick</div>

接下来是我在JS中的代码

<script>
$(document).ready(function(){    
  var oldText, newText;    
  $("#nick").bind("dblclick", replaceHTML);    
  function replaceHTML() {
    $("#nick").empty();
    $("#nick").append("<form><input type=\"text\" class=\"form-control input-lg\" /></form><button class=\"btn btn-default\" type=\"button\" id=\"btnSave\">Save</button><button class=\"btn btn-default\" type=\"button\" id=\"btnDiscard\">Discard</button>");
    $("#nick").unbind("dblclick", replaceHTML);
  }    
  $('#btnDiscard').click(function() {
    alert('rr');
  });    
});
</script>

好的，现在当我DBL点击Nick Change i替换为输入文本。但是当我点击Discard时我没有alert('rr')。当我点击放弃时，我将append(" ")中的相同代码设置为manualy。

我该怎么办？因为也许我应该仅在按Enter键作为save而esc作为disable时再次使用。我该如何解决？

Answer 1

您正在尝试在元素进入dom之前绑定操作。您需要将click绑定移动到函数中：

function replaceHTML() {
  $("#nick").empty();
  $("#nick").append("<form><input type=\"text\" class=\"form-control input-lg\" /></form><button class=\"btn btn-default\" type=\"button\" id=\"btnSave\">Save</button><button class=\"btn btn-default\" type=\"button\" id=\"btnDiscard\">Discard</button>");
  $("#nick").unbind("dblclick", replaceHTML);

  $('#btnDiscard').click(function() {
    alert('rr');
  });
}

编辑：

如果您确实想要侦听转义或输入密钥，请使用以下命令：

$(document).keyup(function(e) {
  if (e.keyCode == 27) {  }   // esc
  else if (e.keyCode == 27) {  }   // enter
});

Answer 2

这是一个plnkr示例，正在侦听Escape和Enter键。

$(document).ready(function() {

  var oldText, newText;

  $("#nick").bind("dblclick", replaceHTML);

  function replaceHTML() {
    oldText = $("#nick").html();

    $("#nick").empty();
    $("#nick").append("<form><input type=\"text\" class=\"form-control input-lg\" value=\"" + oldText + "\"/></form><button class=\"btn btn-default\" type=\"button\" id=\"btnSave\">Save</button><button class=\"btn btn-default\" type=\"button\" id=\"btnDiscard\">Discard</button>");
    $("#nick").unbind("dblclick", replaceHTML);

    bindEvents();
  }

  function bindEvents() {
    $('#btnDiscard').on('click', function() {
      cancel();
    });

    $('#btnSave').on('click', function() {
      save();
    });

    $('form input').on('keydown', function(event) {
      var keyCode = event.keyCode || event.which;

      if (keyCode == 27) {
        cancel();
      }
      else if (keyCode == 13) {
        // You have to prevent the form to make a submit
        event.preventDefault();
        save();
      }
    });
  }

  function save(newText) {
    newText = $('form input').val();

    unbindFormEvents();

    $('#nick').html(newText);
  }

  function cancel() {
    unbindFormEvents();

    $('#nick').html(oldText);
  }

  function unbindFormEvents() {
    $('#btnDiscard').off('click');
    $('#btnSave').off('click');
    $('form input').off('keyup');

    $('#nick').bind('dblclick', replaceHTML);
  }

});

Answer 3

您正在向网页动态添加HTML元素，但您的Javascript会立即执行。所以$('#btnDiscard').click( function(){ ... })在有任何要绑定的内容之前执行。

一种解决方案是使用委托元素来监听此点击。由于您使用的是jQuery，因此将事件绑定到委托非常简单：

$('body').on('click', '#btnDiscard', function(event){
    console.log(event);
});

在这种情况下，正文是委托，侦听来自具有btnDiscard id的元素的单击。当该事件绑定到#btnDiscard时，body是否存在并不重要。

这是jsFiddle的工作原理。

如何捕获按下的ESC和Enter键？

3 个答案: