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

Answer 2

，因为添加新任务后您没有绑定它们，请参见下面的

function swipeleftHandler(event) {
  $(event.target).addClass("swipeleft");
}
function touchHandler(event) {
  $(event.target).addClass("completed");
}
$(document).ready(function() {
  $(".completion").on('touchstart', touchHandler);
  $("div.task").on("swipeleft", swipeleftHandler);
  $(".createTask").submit(function(e) {
    var value = $(".createTaskInput").val();
    var totalExisting = $('div.task').length;
    $('.app').append('<div class="task"><div class="summary">' + value + '</div><div class="completion"></div></div>');
    var newTask = $('div.task').eq(totalExisting);
    newTask
      .on("swipeleft", swipeleftHandler)
      .on('touchstart', touchHandler);
    e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>