Question

我刚开始学习JavaScript / jQuery，我做了一个小测试网站来练习编码。

在我做的其中一个测试中，有一个列表说牛奶和鸡蛋。有一个输入字段和一个按钮，您可以键入内容，单击按钮，然后将其添加到列表中。然后我添加了一个选项，如果您单击其中一个列表项，它将删除它。这样做，但仅适用于预设的Milk和Eggs项目，而不是您自己添加的任何项目。

我认为这是因为代码没有为新添加的项目加载，但我不确定。有人可以帮忙吗？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Practice 3</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>

<body>

    <div class="Title" align="center">
        <h1>Hello</h1>
        <p>This website will use JavaScript to create interactive elements.</p>
    </div>

    <div class="1">
        <h3>Test 1</h3>
        <ul id="list">
            <li>Milk</li>
            <li>Eggs</li>
        </ul>
        <input id="textbox">
        <button id="add">Add to list</button>
    </div>

    <script>
        $('#add').click(function() {
            var listvalue = $('#textbox').val();
                    $("#textbox").val("");
                $('ul').append('<li>' + listvalue + '</li>');
        });

        $('#textbox').keypress(function(event) {
            if(event.which === 13) {
                var listvalue = $('#textbox').val();
                    $('#textbox').val("");
                    $('ul').append('<li>' + listvalue + '</li>');
            }
        });

        $('li').click(function(e) {
            $(e.target).remove();
        });
    </script>
</body>
</html>

Answer 1

使用event delegation

$('#list').on('click', 'li', function(e) {
   $(this).remove();
});

Example

Answer 2

您可以使用on将点击甚至绑定到文档，然后指定一个选择器以指定它只应触发li元素：

$(document).on('click', 'li', function (e) {
    $(this).remove();
});

这仍然适用于新添加的li元素，因为事件处理程序本身绑定到文档本身，而不是单个元素。它只是执行运行时检查以确保调度的事件与提供的选择器匹配。

Answer 3

在堆栈溢出方面得到了Gone Coding的答复：

https://stackoverflow.com/a/34857252/7074256

这是使用jquery的示例：

function moveItems(origin, dest) {
  $(origin).closest("li").appendTo(dest);
}
$(document).on('click', '.add', function () {
    moveItems(this, '#listTwo');
});

$(document).on('click', '.remove', function () {
    moveItems(this, '#listOne');
});

JSFiddle ：http://jsfiddle.net/TrueBlueAussie/r7j3odyy/4/

使用jQuery添加/删除<li>元素</li>

3 个答案: