JQuery 函数未在输入键时触发

Question

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

现在这一切都完美无缺，我对上述内容没有任何问题。当我试图让 "switch back to the span element" 在 "enter" 按键时工作时，问题就来了。

我已经用警报测试了代码，所以我知道正在检测回车键，但我无法从按键功能中触发 "editableTextBlurred" 功能。这意味着它不会在按下回车键时切换回 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>

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

Answer 1

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

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

editableTextBlurred.call(this);

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

editableTextBlurred(this);

...然后

函数editableTextBlurred（输入）{ var html = $(input).val(); var viewableText = $(""); viewableText.html(html); $(input).replaceWith(viewableText); }

另外，onClick 代码有一个问题，它将在 onClick 属性。你可能想要：

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

...尽管我根本不会为此使用 onClick；使用 jQuery.

而不是 adding/removing 事件处理程序，这是需要事件委托的情况：

// 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>

JQuery 函数未在输入键时触发

JQuery function not firing on enter keypress

javascript

jquery

key

function

keypress