如何向附加元素添加功能

Question

我有一个输入文本。 如果键入内容，则文本显示在下面（请参见代码段）。

现在， 我需要对上一步执行相同的操作：单击一个按钮（最好是复选框）以添加/删除所有内容。 这是我失败的主意： DEMO （它会附加输入文本，但是当您键入内容时，文本不会像在我的代码片段中一样出现在下面）。

我感觉下面的添加文本的功能不起作用，因为选择附加元素存在问题。 我该怎么做呢？

任何更简单的想法做到这一点将是巨大的

 var name1 = document.getElementById('name'); name1.addEventListener('input', function() { var result = document.querySelector('.X'); console.log(this.value ); result.innerHTML = this.value; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>What is your name? </label><input type="text" id="name"> <p>Your name is: <span class="X"></span></p> 

Answer 1

单击添加按钮时，将代码段的第一部分放入附加逻辑中。 就像您的代码中一样，输入框在附加侦听器后附加到文档。

 if (!added) { $content = $(NewContent).appendTo('.firstappend'); // attach listener after input box actually exists! var name1 = document.getElementById('A'); name1.addEventListener('input', function() { var result = document.querySelector('span.Y'); console.log(this.value ); result.innerHTML = this.value; }); } 

Answer 2

 $(function() { let NewContent = '<div class="added">' + '<p>' + '<label>What is your name? </label>' + '<input type="text" id="A">' + '</p>' + '<p>Your name is: <span class="Y"></span></p>' + '</div>'; $(".addremove").on('click', function() { if ($(".added").length) { $(".added").remove(); } else { $(".firstappend").append(NewContent); } }); $(document).on('change keyup', '#A', function(event) { $("span.Y").html($(event.currentTarget).val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toadd"> <button type="button" class="addremove">Do you have a name?</button> </div> <div class="firstappend"></div> 

从您包含的DEMO开始，无法显式调用文档中附加的元素，因为您使用的是jQuery，因此可以执行此操作

$(document).on('change keyup', '#A', function(event) {
  $("span.Y").html($(event.currentTarget).val());
});