Jquery 尝试添加选择器但不与我一起工作

我不知道为什么.on“click”代码不能与选择器一起使用 无论我如何更改选择器，此代码都不起作用

 $(function () {
    $('.todolist input').on('keydown', function(e){
       if(e.keyCode == 13){
           $('<li>' + $(this).val() + '<i class="fas fa-times"></i></li>').appendTo($('.todolist ul'))
           $(this).val('');
       }
    })
})

$(function () {
    $('.todolist .fa-times').on('click', 'li i', function() {
        $(this).parent('li').css('text-decoration', 'line-through').delay(200).fadeOut(300, function () {
        $(this).parent('li').remove();
        });

    });
});

 $(function () {
    $('.todolist .fa-times').on('click', function() {
        $(this).parent('li').css('text-decoration', 'line-through').delay(200).fadeOut(300, function () {
        $(this).parent('li').remove();
        });

    });
});

我正在制作一个待办事项列表，当我单击图标x时，我希望在使用jQuery创建任何待办事项列表之后将其删除

<div class="container">
<div class="todolist">
    <h3>To Do List:</h3>
    <ul>
        <li>Learning JQuery<i class="fas fa-times"></i></li>
        <li>Codeing My 1st Site<i class="fas fa-times"></i></li>
        <li>Learning Angular js<i class="fas fa-times"></i></li>
        <li>Learning SAS<i class="fas fa-times"></i></li>
        <li>More Training<i class="fas fa-times"></i></li>
    </ul>
    <input type="text" placeholder="Add New Task">
</div>

---

尝试删除选择器中的空格：

$(function () {
$('.todolist.fa-times').on('click', function() {
    $(this).parent('li').css('text-decoration', 'line-through').delay(200).fadeOut(300, function () {
    $(this).parent('li').remove();
    });

});
});

编辑：

$element.on'click'，。。。只有在选择已存在的元素时，事件绑定才起作用。这个问题可以通过多种方式解决，您可以在创建元素后重新绑定事件，从父级委托事件，或者直接将它们绑定到文档

例如：

$(document).on("click", ".todolist.fa-times", function() {
    $(this).parent('li')
         .css('text-decoration', 'line-through')
         .delay(200).fadeOut(300, function () {
             $(this).parent('li').remove();
         });
 });

---

尝试删除选择器中的空格：

$(function () {
$('.todolist.fa-times').on('click', function() {
    $(this).parent('li').css('text-decoration', 'line-through').delay(200).fadeOut(300, function () {
    $(this).parent('li').remove();
    });

});
});

编辑：

$element.on'click'，。。。只有在选择已存在的元素时，事件绑定才起作用。这个问题可以通过多种方式解决，您可以在创建元素后重新绑定事件，从父级委托事件，或者直接将它们绑定到文档

例如：

$(document).on("click", ".todolist.fa-times", function() {
    $(this).parent('li')
         .css('text-decoration', 'line-through')
         .delay(200).fadeOut(300, function () {
             $(this).parent('li').remove();
         });
 });

---

您的委派事件处理程序同时具有选择器和委派：

$('.todolist .fa-times').on('click', 'li i', function() {

li i不是.fa乘以ie$.todolist.fa乘以li i.length==0的子节点

改为

$('.todolist').on('click', 'li i.fa-times', function() {

或者只是：

$('.todolist').on('click', '.fa-times', function() {

---

您的委派事件处理程序同时具有选择器和委派：

$('.todolist .fa-times').on('click', 'li i', function() {

li i不是.fa乘以ie$.todolist.fa乘以li i.length==0的子节点

改为

$('.todolist').on('click', 'li i.fa-times', function() {

或者只是：

$('.todolist').on('click', '.fa-times', function() {

---

您可以向我们展示您正在尝试选择的html元素吗？您是动态创建它们的吗？@freedomn-m您是对的，您在这里提供的答案是正确的解决方案，这就是为什么我给出了您的答案+1您可以向我们显示您尝试选择的html元素吗？您是动态创建的吗？@freedomn-m您是对的，您在这里提供的答案是正确的解决方案，这就是为什么我给您的答案+1