Question

我使用Bootstrap和jQuery创建了一个待办事项列表。通过点击＆＃39; X＆＃39;从列表中删除项目。每个列表项右侧的徽章。这适用于首次加载时页面上的项目，但您无法删除用户添加的项目。

也许需要刷新某些内容以提醒脚本应该监视click事件的新元素？

todo.js：

$(document).ready(function() {
    //add item if the button is clicked
    $('#addButton').click(function(){
        $('<li class="list-group-item"><span class="badge">X</span>' + $('#input').val() + '</li>').appendTo('#list');
        $('#input').val(null);
    });

    //add item if the enter key is pressed
    $('#input').bind("enterKey",function(e){
        $('<li class="list-group-item"><span class="badge">X</span>' + $('#input').val() + '</li>').appendTo('#list');
        $('#input').val(null);
    });

    $('#input').keyup(function(e){
        if(e.keyCode == 13) {
            $(this).trigger("enterKey");
        }
    });

    //remove an item by clicking the badge
    $('.badge').click(function() {
        $(this).parent().remove();
    });
});

的index.html：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To Do List</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="todo.js"></script>
</head>
<body>
<div class="container">

    <div class="panel panel-default">

        <!-- Default panel contents -->
        <div class="panel-heading"><h3 class="panel-title">To Do List</h3></div>

      <!-- List group -->
    <ul id="list" class="list-group">
        <li class="list-group-item"><span class="badge">X</span>Pushups! </li>
        <li class="list-group-item"><span class="badge">X</span>Get Money</li>
        <li class="list-group-item"><span class="badge">X</span>Increase my word power</li>
        <li class="list-group-item"><span class="badge">X</span>Beat God at his own game</li>
        <li class="list-group-item"><span class="badge">X</span>Make everything go my way</li>
    </ul>
    </div>

    <!-- text input & button -->
    <div class="row">
        <div class="col-lg-6">
            <div class="input-group">
                <span class="input-group-btn">
                    <button id="addButton" class="btn btn-default" type="button">Add</button>
                </span>
                <input id="input" type="text" class="form-control">
            </div> <!-- end input group -->
        </div> <!-- end col-lg-6 -->
    </div> <!-- end row -->
    <br>
</div>
</body>
</html>

Answer 1

试试此演示：http://jsfiddle.net/enw5rcdx/

使用.on - http://api.jquery.com/on/

委派事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

<强>码

   //remove an item by clicking the badge
    $(document).on('click', '.badge', function () {
        $(this).parent().remove();
    });

Answer 2

这应该有效http://jsfiddle.net/pcx5mvh7/4/

解释

添加项目后，将运行以下代码：

$(".badge").last().click(function () {$(this).parent().remove();});

这会将click事件添加到最后一个“.badge”即。刚刚添加的那个会在点击x时删除该项目。

jQuery：click（）不处理由jQuery添加的元素

2 个答案:

解释