Question

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

继承人代码：

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

Answer 1

这里有一些问题：

button上没有点击事件提交输入的文字
$("li").on("click", function(){将无法正常工作，因为在DOM加载后会附加li，因此您需要在其他位置添加事件侦听器（如body）并添加{{ 1}}作为代表团..ex：li
您应该拨打$("body").on("click", "li", function(){而不是$(this).remove();来删除实际点击的$("li").remove()

FIDDLE

li

无法选择＆＃34; li＆＃34;带有jQuery标记的项目

1 个答案: