Javascript 选择带有jQuery标记的“li”项时出现问题_Javascript_Jquery_Html

Javascript 选择带有jQuery标记的“li”项时出现问题

javascript jquery html

Javascript 选择带有jQuery标记的“li”项时出现问题,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试创建一个简单的todo应用程序，它可以发布新项目并附加到DOM中，并在单击该项目时删除该项目。我可以将待办事项附加到页面中，但当单击它们时，它们不会被删除。我认为这与我的onclick事件处理程序有关，因为它没有正确选择li。有什么想法吗代码如下： <html> <head> <script src='jquery-2.1.3.js'></script> <script src='handlebars-v2.0.0

我正在尝试创建一个简单的todo应用程序，它可以发布新项目并附加到DOM中，并在单击该项目时删除该项目。我可以将待办事项附加到页面中，但当单击它们时，它们不会被删除。我认为这与我的onclick事件处理程序有关，因为它没有正确选择li。有什么想法吗

代码如下：

<html>
<head>
    <script src='jquery-2.1.3.js'></script>
    <script src='handlebars-v2.0.0.js'></script>
</head>
<body>


        <!-- #TODO LIST
        Create textarea "todo item" and associated "submit button"
        When "submit button" is clicked
            take data entered into "todo item"
            append to empty div "todos" as Li item with id of the todo item
            Empty the "todo item"
        When a list item in "todos" is clicked delete item from "todos"
        -->


        <div>
            <textarea id = 'todoItem'></textarea>
            <button id = 'submitButton'>Post</button>
        </div>

        <div class = 'todos'>Items</div>

        <script>
            $("#submitButton").on("click", function(){
                var todo = $("#todoItem").val();
                $('<li>' + todo + '</li>').appendTo('.todos');
                $("#todoItem").val('');
            });
            $("li").on("click", function(){
                $('li').remove();
            });
        </script>
    </body>
    </html>

这里有几个问题：

您没有单击事件按钮来提交输入的文本 $li.onclick，函数{将不起作用，因为li是在DOM加载后追加的，因此您需要在其他地方添加一个事件侦听器，如主体，并将li作为委托添加..例如：$body.onclick，li，函数{ 您应该调用$this.remove；而不是$li.remove来删除实际单击的li

$("#submitButton").click(function(){
   var todo = $("#todoItem").val();
   $('<li>' + todo + '</li>').appendTo('.todos');
   $("#todoItem").val('');
});


$("body").on("click", "li", function(){
   $(this).remove();
});