Question

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

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

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

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

editableTextBlurred.call(this);

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

editableTextBlurred(this);

......然后

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

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

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>

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

1 个答案: