Question

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

按下回车键，我用动态创建的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

你不必将jilla与jilla混合，只需使用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>

Answer 2

选择器不再工作了，因为克隆元素时有2个元素具有相同的ID。在这种情况下，您必须克隆然后更改id属性，如下所示：

clonnedElement.attr('id','myClonedElement');

然后选择器将再次工作

Jquery克隆div不像原来那样运作？

2 个答案: