Question

向我的ul添加列表项时，jQuery on事件似乎无法触发或处理这些事件。根据我的理解，使用on而不是说.click()应该适用于所有项目，无论是使用HTML创建还是稍后通过javascript /等添加。

<div class="container">
    <div class="list">TO-DO LIST<div class="glyphicon glyphicon-plus"></div></div>
    <ul class="toDoList" style="list-style: none;">
        <li id="addToDo"><input type='text' id="addToDoText" placeholder="Add New ToDo"></input></li>
        <li><span><i class="fa fa-trash"></i></span>Buy Robes</li>
        <li><span><i class="fa fa-trash"></i></span>Fight Malfoy</li>
        <li><span><i class="fa fa-trash"></i></span>Buy New Wand</li>
        <li><span><i class="fa fa-trash"></i></span>Kill Voldemort</li>
        <li><span><i class="fa fa-trash"></i></span>Feed Hedwig</li>
        <li><span><i class="fa fa-trash"></i></span>Send Owl to Sirius</li>
        <li><span><i class="fa fa-trash"></i></span>Do Dishes</li>
        <li><span><i class="fa fa-trash"></i></span>Wash Robes</li>
        <li><span><i class="fa fa-trash"></i></span>Buy Hagrid's Birthday Gift</li>
    </ul>
</div>

和我的jQuery：

$('ul.toDoList li').on("click", function(){
    $(this).toggleClass('completedItem');
});

$("input").on("keypress", function(e){
    if(e.which == 13){
        new_text = $(this).val();
        $(this).val("");
        add_toDo(new_text);
    }
});

$('li .fa-trash').on("click", function(){
    $(this).closest('li').remove();
});

function add_toDo(item){
    console.log("adding: "+item);
    $('ul.toDoList').append('<li><span><i class="fa fa-trash"></i></span>'+item+'</li>');
};

当我添加一个项目并单击该项目时，它不会切换completedItem类，也不能通过单击fa-trash图标将其删除。

Answer 1

更多地研究.on（）和.click（）jquery函数。使用on（）并不意味着绑定事件到所有特定元素，之前的选择器将选择受此函数影响的元素。你在DOM中添加新元素的任何方式，所以jquery在添加新元素之前缓存了旧元素，并且完全没有意识到新元素。这段代码大多数都是用这种方式编辑的：

$(document).on("click", "ul.toDoList li", function(){
    $(this).toggleClass('completedItem');
});

$(document).on("click", "li .fa-trash", function(){
   $(this).closest('li').remove();
});

动态添加列表项不与`on`事件一起使用

1 个答案: