Javascript jQuery:click（）不处理jQuery添加的元素
我使用Bootstrap和jQuery创建了一个待办事项列表。通过单击每个列表项目右侧的“X”标记，可以从列表中删除项目。这适用于首次加载页面时页面上的项目，但不能删除用户添加的项目 可能需要刷新一些内容来提醒脚本，应该为单击事件监视新元素 todo.js：Javascript jQuery:click（）不处理jQuery添加的元素,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我使用Bootstrap和jQuery创建了一个待办事项列表。通过单击每个列表项目右侧的“X”标记，可以从列表中删除项目。这适用于首次加载页面时页面上的项目，但不能删除用户添加的项目 可能需要刷新一些内容来提醒脚本，应该为单击事件监视新元素 todo.js： $(document).ready(function() { //add item if the button is clicked $('#addButton').click(function(){ $(
$(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();
});
});
$（文档）.ready（函数（）{
//如果单击按钮，则添加项目
$（“#添加按钮”）。单击（函数（）{
$（'li class=“list group item”>X'+$（'#input'）.val（）+'）.appendTo（'#list'）；
$（'#input'）.val（null）；
});
//如果按enter键，则添加项目
$（'#input'）.bind（“enterKey”，函数（e）{
$（'li class=“list group item”>X'+$（'#input'）.val（）+'）.appendTo（'#list'）；
$（'#input'）.val（null）；
});
$（“#输入”）.keyup（函数（e）{
如果（e.keyCode==13）{
$（此）.trigger（“enterKey”）；
}
});
//单击徽章删除项目
$（'.badge'）。单击（函数（）{
$（this.parent（）.remove（）；
});
});
<!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>
待办事项清单
待办事项清单
- XPushups
- XGet Money
- xin增加我的词力
XBeat God在他自己的游戏中
- x让一切按我的方式进行
添加
- 要在上使用的API
//remove an item by clicking the badge
$(document).on('click', '.badge', function () {
$(this).parent().remove();
});
试试这个演示：
- 要在上使用的API
//remove an item by clicking the badge
$(document).on('click', '.badge', function () {
$(this).parent().remove();
});
$(".badge").last().click(function () {$(this).parent().remove();});
$(".badge").last().click(function () {$(this).parent().remove();});
这会在最后一个“.badge”中添加一个单击事件，即刚刚添加的事件，单击x时将删除该项目。请参阅：事件删除请参阅：事件删除使用
$（文档）。on（）.badge：）$（document）.on（）.badge：）