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>