试图添加选择器而不是与我合作

Question

我不知道为什么.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创建任何<li>后删除它

<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>

Answer 1

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

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

li i不是.fa-times的子节点（即$(".todolist .fa-times li i").length === 0)）

改成

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

要不就：

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

Answer 2

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

$(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。

例：

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