jQuery:click(）无法处理jQuery添加的元素

jQuery: click() not working on elements added by jQuery

本文关键字：jQuery 处理 添加 元素 click      更新时间：2023-09-26

我使用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>

尝试此演示：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();
    });

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

解释

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

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

这将点击事件添加到最后的"；。徽章"；即刚刚添加的一个，它将在单击x时删除项目。

相关文章：