目前，我正在创建一些东西，它只允许我创建任务，完成后单击它们并向左滑动以摆脱它们。我遇到的问题是，当附加新任务时，它们不受脚本中任何 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>
那是因为您在添加对象之前添加了事件侦听器。一种解决方法是像这样将事件侦听器添加到正文中。
$( "body" ).on( "swipeleft", "div.task", swipeleftHandler );
和
$(" body ").on( "touchstart", ".completion", function(){
$(this).addClass("completed")
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句