JQuery函数在输入按键时没有触发答案

【问题标题】：JQuery function not firing on enter keypressJQuery函数在输入按键时没有触发
【发布时间】：2015-05-07 06:59:26
【问题描述】：

我有以下 jQuery/js 控制 trello 样式输入字段。因此，当您单击 span 元素时，它会切换到输入字段。然后在您完成编辑元素并将焦点从它身上移开（模糊）后，它会切换回带有新文本的 span 元素。我还让它提交给一个 ajax 脚本，以将新文本提交到我的数据库。

现在这一切都完美无缺，我对上述内容没有任何问题。当我试图让“切换回跨度元素”在“输入”按键上起作用时，问题就来了。

我已经用警报测试了代码，所以我知道正在检测回车键，但我无法从按键函数中触发“editableTextBlurred”函数。这意味着它不会在 enter 按下时切换回 span 元素。

function divClicked(div) {
    div = "#"+div;
    var divHtml = $(div).text();
    var editableText = $('<input type="text" id="firstname" name="firstname" placeholder="First Name" onChange="profileUpdate(this)">');
    editableText.val(divHtml);
    $(div).replaceWith(editableText);
    editableText.focus();
    console.log(editableText);
    // setup the blur event for this new textarea
    editableText.blur(editableTextBlurred);

    $(":input").keypress(function(event) {
        if (event.which == '13') {
            event.preventDefault();
            editableTextBlurred();
        }
    });
}

function editableTextBlurred() {
    var html = $(this).val();
    var viewableText = $("<span id='firtname_text' onClick='divClicked(this.id)'></span>");
    viewableText.html(html);
    $(this).replaceWith(viewableText);
}

<span id='firtname_text' onClick='divClicked(this.id)'>
    ".ucfirst($fname)."
</span>

任何关于我遗漏或做错的见解将不胜感激，谢谢！

【问题讨论】：

尝试 Keyup 事件。它可能会起作用。有时某些浏览器无法处理按键事件。

标签： javascript jquery function key keypress

【解决方案1】：

我怀疑它成功地调用了editableTextBlurred，但是那个函数不起作用。它不工作的原因是它期望this 引用input 元素，但是你调用它的方式，this 将是全局对象（在松散模式下）或undefined（在严格模式）。

要使editableTextBlurred 中的this 与keypress 处理程序中的this 相同，请使用.call：

editableTextBlurred.call(this);

或者，只需将元素作为参数传递：

editableTextBlurred(this);

...然后

函数可编辑文本模糊（输入）{ var html = $(输入).val(); var viewableText = $(""); viewableText.html(html); $(input).replaceWith(viewableText); }

另外，onClick 代码存在问题，它会在onClick 属性中以this.id（实际的文本）结束。你可能想要：

var viewableText = $("<span id='firtname_text' onClick='divClicked(\"'" + input.id + "'\")'></span>");

...虽然我根本不会使用onClick；使用 jQuery。

不是添加/删除事件处理程序，而是需要事件委托的那种情况：

// Delegated handler for converting to inputs
$("#container").on("click", ".click-to-edit", function(e) {
  var $div = $(this),
      $input = $("<input type=text>");
  $div.toggleClass("click-to-edit editing");
  $input.val($div.text());
  $div.empty().append($input);
  setTimeout(function() { // Some browsers want this delay
    $input.focus();
  }, 50);
});

// Delegated handler for converting back
$("#container").on("keypress", ".editing input", function(event) {
  var $input = $(this), $div;
  if (event.which == 13) {
    event.preventDefault();
    $div = $input.closest(".editing");
    $div.toggleClass("click-to-edit editing");
    $div.empty().text($input.val());
  }
});

<div id="container">
  <div class="click-to-edit">Testing 1 2 3</div>
  <div class="click-to-edit">Testing 4 5 6</div>
  <div class="click-to-edit">Testing 7 8 9</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【讨论】：