javascript - Jquery 克隆的 div 不像原来的那样运行？

Question

我在文档加载时克隆了一个 div，其中包含一个带 id=taskInput 的输入元素。

按下回车键后，我将 div 替换为动态创建的 div。如果用户随后按下删除按钮，我会用原始 div 的克隆替换这个创建的 div。

我的问题是我的 document.queryselector 无法使用原始文件的克隆版本。我希望在按下删除按钮后拥有与最初相同的功能。

var originalState = $("#inputContainer").clone(true)

document.querySelector('#taskInput').addEventListener('keypress', function (e) {
  if((e.which == 13) && ( document.querySelector('#taskInput').value.length > 0 )){
    addButtons(this.value)
  } 
})

function addButtons(task){
  $("#inputContainer").replaceWith('<div id=taskConfirmed></div>')
}

$(document).on('click','#delete',function(){
  $("#taskConfirmed").replaceWith(originalState)
})

Answer 1

您不必将 vanilla 与 jQuery 混合使用，只需使用 jQuery 的魔力附加 keypress 事件即可，例如:

$(document).on('keypress', '#taskInput', function(e) {
  if (e.which == 13 && $(this).val().length > 0) {
    addButtons(this.value)
  }
});

希望这对您有所帮助。

var originalState = $("#inputContainer").clone(true);

$(document).on('keypress', '#taskInput', function(e) {
  if (e.which == 13 && $(this).val().length > 0) {
    addButtons(this.value)
  }
})

function addButtons(task) {
  $("#inputContainer").replaceWith('<div id=taskConfirmed>Task Confirmed</div>')
}

$(document).on('click', '#delete', function() {
  $("#taskConfirmed").replaceWith(originalState);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='inputContainer'>
  <input id="taskInput" />
</div>

<button id="delete">Delete</button>