append（）の要素で動作しないJqueryイベント

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>