当DOM中有很多元素绑定相同事件时使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
margin: 50px auto;
}
.box ul {
list-style: none;
}
.box ul li {
height: 40px;
line-height: 40px;
border: 1px solid #b0b0b0;
margin-top: 10px;
padding-left: 10px;
}
.box ul li span {
float: right;
padding: 0 5px;
font-size: 12px;
color: #fff;
height: 26px;
line-height: 26px;
margin-top: 7px;
margin-right: 10px;
}
.box ul li span.update {
background-color: peru;
}
.box ul li span.delete {
background-color: lightcoral;
}
#addBtn {
height: 30px;
background-color: lightgreen;
line-height: 30px;
text-align: center;
margin-top: 20px;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>苹果<span class="update">修改</span><span class="delete">删除</span></li>
<li>橘子<span class="update">修改</span><span class="delete">删除</span></li>
<li>香蕉<span class="update">修改</span><span class="delete">删除</span></li>
<li>西瓜<span class="update">修改</span><span class="delete">删除</span></li>
<li>葡萄<span class="update">修改</span><span class="delete">删除</span></li>
<li>芒果<span class="update">修改</span><span class="delete">删除</span></li>
/*
<li>芒果<span class="update" οnclick="update(this)">修改</span><span class="delete" οnclick="del(this)">删除</span>
</li>
*/
</ul>
<div id="addBtn">添加一项</div>
</div>
<script src="jquery-1.11.1.min.js"></script>
<script>
$('#addBtn').click(function () {
var res = prompt('请输入要添加的内容');
if (res) {
$('ul').append('<li>' + res + '<span class="update">修改</span><span class="delete">删除</span></li>');
// $('<li>'+res+'<span class="update">修改</span><span class="delete">删除</span></li>').appendTo('ul');
}
});
// jQuery事件委托
$('ul').on('click', 'span', function () {
if ($(this).html() === '修改') {
var res = prompt('请输入要修改的内容');
if (res) {
$(this).parent().replaceWith('<li>' + res + '<span class="update">修改</span><span class="delete" >删除</span></li>');
}
} else {
if (confirm('确定要删除吗?')) {
$(this).parent().remove();
}
}
});
// 给按钮绑定事件
function update(that) {
var res = prompt('请输入要修改的内容');
if (res) {
$(that).parent().replaceWith('<li>' + res + '<span class="update" οnclick="update(this)">修改</span><span class="delete" οnclick="del(this)">删除</span></li>');
}
}
function del(that) {
if (confirm('确定要删除吗?')) {
$(that).parent().remove();
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
margin: 50px auto;
}
.box ul {
list-style: none;
}
.box ul li {
height: 40px;
line-height: 40px;
border: 1px solid #b0b0b0;
margin-top: 10px;
padding-left: 10px;
}
.box ul li span {
float: right;
padding: 0 5px;
font-size: 12px;
color: #fff;
height: 26px;
line-height: 26px;
margin-top: 7px;
margin-right: 10px;
}
.box ul li span.update {
background-color: peru;
}
.box ul li span.delete {
background-color: lightcoral;
}
#addBtn {
height: 30px;
background-color: lightgreen;
line-height: 30px;
text-align: center;
margin-top: 20px;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>苹果<span class="update">修改</span><span class="delete">删除</span></li>
<li>橘子<span class="update">修改</span><span class="delete">删除</span></li>
<li>香蕉<span class="update">修改</span><span class="delete">删除</span></li>
<li>西瓜<span class="update">修改</span><span class="delete">删除</span></li>
<li>葡萄<span class="update">修改</span><span class="delete">删除</span></li>
<li>芒果<span class="update">修改</span><span class="delete">删除</span></li>
/*
<li>芒果<span class="update" οnclick="update(this)">修改</span><span class="delete" οnclick="del(this)">删除</span>
</li>
*/
</ul>
<div id="addBtn">添加一项</div>
</div>
<script src="jquery-1.11.1.min.js"></script>
<script>
$('#addBtn').click(function () {
var res = prompt('请输入要添加的内容');
if (res) {
$('ul').append('<li>' + res + '<span class="update">修改</span><span class="delete">删除</span></li>');
// $('<li>'+res+'<span class="update">修改</span><span class="delete">删除</span></li>').appendTo('ul');
}
});
// jQuery事件委托
$('ul').on('click', 'span', function () {
if ($(this).html() === '修改') {
var res = prompt('请输入要修改的内容');
if (res) {
$(this).parent().replaceWith('<li>' + res + '<span class="update">修改</span><span class="delete" >删除</span></li>');
}
} else {
if (confirm('确定要删除吗?')) {
$(this).parent().remove();
}
}
});
// 给按钮绑定事件
function update(that) {
var res = prompt('请输入要修改的内容');
if (res) {
$(that).parent().replaceWith('<li>' + res + '<span class="update" οnclick="update(this)">修改</span><span class="delete" οnclick="del(this)">删除</span></li>');
}
}
function del(that) {
if (confirm('确定要删除吗?')) {
$(that).parent().remove();
}
}
</script>
</body>
</html>