blur（）和keypress（）在使用replacewith（）的JQuery上不起作用

Question

如何在JQuery中將blur（）和keypress（）事件與replaceWith（）同時使用。 我在下面嘗試了這段代碼，它可以與blur（）一起使用，而沒有任何錯誤，只是觸發了一個單詞“ undefined”，但是當我按下Enter鍵時，我得到了這個錯誤：

“未捕獲的DOMException：無法在'Node'上執行'replaceChild'：要刪除的節點不再是該節點的子節點。也許已將其移動到'blur'事件處理程序中？”

這是我的代碼：

$('body').on('blur keypress', 'input', function (e) {
  if (e.type === 'focusout' || e.keyCode === 13) {
    $(this).replaceWith('<strong>' + $(this).val() + '</strong>');
  }
});

Answer 1

一旦按下回車鍵，該元素就會失去焦點，即在移開該元素時會模糊，並觸發一個新事件，但是當該事件觸發時，該元素將不再在那里，從而導致錯誤。

您可以通過拆分條件來解決此問題，並在按下Enter鍵時觸發blur事件

$('body').on('blur keypress', 'input', function (e) {
  if ( e.type === 'focusout' ) {
    $(this).replaceWith('<strong>' + $(this).val() + '</strong>');
  }
  if ( e.keyCode === 13 ) {
    $(this).trigger('blur')
  }
});