javascript - Jquery 事件不适用于来自append() 的元素

Question

目前，我正在创建一些东西，它可以简单地让我创建任务，完成后单击它们，然后向左滑动以删除它们。 我遇到的问题是，当附加新任务时，它们不会受到脚本中任何 JQuery 事件的影响。

Tl;dr: 附加的 div 不受以下 JavaScript 的影响，如何解决此问题？

<div class="app">

  <div class="appHeader">
    <h2>Tasks</h2>

    <form class="createTask">
      <input type="text" class="createTaskInput" size="10" maxlength="25" placeholder="Type here to create your task..." //>
    </form>

  </div>

  <div class="task">
    <div class="summary">This is an example task
      <br>When you complete a task, click the red button
      <br>Should you want to remove a task, swipe left on the task.
    </div>
    <div class="completion"></div>
  </div>
</div>


<script>
  $(".completion").on({
    'touchstart': function() {
      $(this).addClass("completed")
    }
  });

  $(document).ready(function() {
    $("div.task").on("swipeleft", swipeleftHandler);

    function swipeleftHandler(event) {
      $(event.target).addClass("swipeleft");
    }
  });

  $(document).ready(function() {
    $(".createTask").submit(function(e) {
      var value = $(".createTaskInput").val();

      $('.app').append('<div class="task"><div class="summary">' +
        value + '</div><div class="completion"></div></div>')
      e.preventDefault();
    });
  });
</script>

Answer 1

这是因为您在添加对象之前添加了事件监听器。 解决方法是将事件监听器添加到正文，如下所示。

$( "body" ).on( "swipeleft", "div.task", swipeleftHandler );

和

$(" body ").on( "touchstart", ".completion", function(){
  $(this).addClass("completed")
});