jQuery：click（）不适用于jQuery添加的元素[重复]答案

【问题标题】：jQuery: click() not working on elements added by jQuery [duplicate]jQuery：click（）不适用于jQuery添加的元素[重复]
【发布时间】：2014-11-15 20:40:36
【问题描述】：

我使用 Bootstrap 和 jQuery 制作了一个待办事项列表。通过单击每个列表项右侧的“X”标记，可以从列表中删除项目。这适用于首次加载时页面上的项目，但您不能删除用户添加的项目。

也许需要刷新一些东西来提醒脚本应该为点击事件监视新元素？

http://jsfiddle.net/pcx5mvh7/

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>

【问题讨论】：

参见：事件委托

标签： javascript jquery twitter-bootstrap

【解决方案1】：

试试这个演示：http://jsfiddle.net/enw5rcdx/

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

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。

代码

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

【讨论】：

使用$(document).on() 效率低下。它应该是 .badge 的父容器。 IE。 $(.badge-parent).on('click', '.badge, function(){...});
当然，:) Demo 是用于示例代码，以便 OP 读取 API 并做他/她想做的任何事情。还有我们在这里看到多少效率（在这种特定情况下）？ .00001 毫秒？取决于 DOM，但是同意你的观点。 OP 不是这个，但请阅读 API 文档。

【解决方案2】：

这应该可以http://jsfiddle.net/pcx5mvh7/4/

说明

添加项目后，运行此代码：

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

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

【讨论】：