如何将函数添加到附加元素

Question

我有一个输入文本。如果您输入内容，文本会出现在下方（参见代码 sn-p）。

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

我觉得下面添加文字的功能不起作用，因为选择附加元素时出现问题。我该怎么做？

如果有更简单的想法来做到这一点，那就太好了

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

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

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>

从您包含的演示中， 附加到文档的元素不能被显式调用，因为你使用的是 jQuery，你可以这样做

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