jquery事件不能与append中的元素一起工作（）

  • Z时代
  • 2024-01-10
  • 分类：问答

目前，我创建的东西只是让我创建任务，当它们完成时单击它们并向左滑动即可摆脱它们。 我遇到的问题是，当附加新任务时，它们不受任何脚本中的任何JQuery事件的影响。jquery事件不能与append中的元素一起工作（）

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

回答：

因为您在添加新任务见下文

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>

以上是 jquery事件不能与append中的元素一起工作（） 的全部内容， 来源链接： utcz.com/qa/258302.html

回到顶部