JQuery函数没有在输入keypress时触发

I have the following jQuery/js controlling a trello style input field. So when you click on the span element, it switches to an input field. Then after you finish editing the element and take focus away from it(blur), it switches back to the span element with the new text. I also having it submitting to an ajax script to submit the new text to my database.

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

Now this all works flawlessly and I have no problems with what is described above. The problem came when I tried to make the "switch back to the span element" work on "enter" key press.

现在这一切都完美无瑕,我对上述内容没有任何问题。当我试图按“输入”键按下“切换回span元素”时出现问题。

I have tested the code with an alert so I know the enter key is being detected but I can not get the "editableTextBlurred" function to fire from within the keypress function. Which means that it will not switch back to the span element on enter press.

我已经使用警报测试了代码,因此我知道正在检测回车键,但我无法从按键功能中触发“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>

Any insight on what I missing or doing wrong will be greatly appreciated, Thanks!

任何有关我遗失或做错的见解都将不胜感激,谢谢!

1 个解决方案

#1

I suspect it's successfully calling editableTextBlurred, but then that function isn't working. And the reason it's not working is that it expects this to refer to the input element, but the way you're calling it, this will be the global object (in loose mode) or undefined (in strict mode).

我怀疑它成功调用了editableTextBlurred,但后来该功能无效。它不工作的原因是它希望它引用输入元素,但是你调用它的方式,这将是全局对象(在松散模式下)或未定义(在严格模式下)。

To make the this in editableTextBlurred the same as the this in the keypress handler, use .call:

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

editableTextBlurred.call(this);

Alternately, just pass the element as an argument:

或者,只需将元素作为参数传递:

editableTextBlurred(this);

...and then

function editableTextBlurred(input) { var html = $(input).val(); var viewableText = $(""); viewableText.html(html); $(input).replaceWith(viewableText); }

function editableTextBlurred(input){var html = $(input).val(); var viewableText = $(“”); viewableText.html(HTML); $(输入).replaceWith(viewableText); }

Separately, there's a problem with that onClick code, it will end up with this.id (the actual text) in the onClick attribute. You probably wanted:

另外,onClick代码存在问题,它将以onClick属性中的this.id(实际文本)结束。你可能想要:

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

...though I wouldn't use onClick for this at all; use jQuery.

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

Rather than adding/removing event handlers, this is the kind of situation that cries out for event delegation:

而不是添加/删除事件处理程序,这是一种呼吁事件委派的情况:

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

#1