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

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

＆＃13;

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;
  });
}

＆＃13;

Answer 2

＆＃13;

$(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());
  });
});

＆＃13;

<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>

＆＃13;

来自你所包含的DEMO，无法显式调用文档的附加元素，因为您使用jQuery，可以执行此操作

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

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

2 个答案: