您的位置：首页 > Web前端 > JQuery

jQuery on()方法给动态生成的元素绑定事件----实战分析

2017-08-01 17:36 726 查看
打开天窗说亮话—–没那多废话



通过行内事件也可以模拟动态绑定的操作但是有点牵强

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1300, target-densitydpi=device-dpi" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="date=no" />
<title></title>
<link rel="stylesheet" href="css/reset.css">
<style>
input{
border:1px dotted red;
width: 96px;
height: 35px;
}
.boxx{
margin-left: 200px;
overflow: hidden;
}
.fl{
float: left;
}
.flbx{
margin-top: 10px;
margin-left: 20px;
}
</style>
</head>
<body>
<form action="" method="" style="margin:200px auto;width: 500px;">
<div class="boxx">
<div class="lie">
<div class="fl">
<label for="male">第一次付息日期</label>
<input type="text" name="sex" id="male" />
</div>
<div class="fl flbx">
<a href="###" onclick="adds(this)";>新增</a>
<a href="###" onclick="dels(this)";>删除</a>
</div>
</div>
</div>
</form>
</body>
<script src="js/jquery-1.8.2.min.js"></script>
<script>
var li = '<div class="lie"><div class="fl"><label for="male">第一次付息日期</label><input type="text" name="sex" id="male" /></div><div class="fl flbx"><a href="###" onclick="adds(this)";>新增</a><a href="###" onclick="dels(this)";>删除</a></div></div>';

function adds( obj ){
$(li).appendTo($('.boxx'))
};
function dels( obj ){
if(confirm('确定要删除这条信息？')){
$(obj).parents('.lie').remove();
}
};
</script>
</html>


一步之遥

网上栗子千千万万能用的没几个

下面的代码不仅量减少了而且还规范！不用费时费力的追加行内事件！更高效率的工作！加油！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1300, target-densitydpi=device-dpi" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="date=no" />
<title></title>
<link rel="stylesheet" href="css/reset.css">
<style>
input{
border:1px dotted red;
width: 96px;
height: 35px;
}
.boxx{
margin-left: 200px;
overflow: hidden;
}
.fl{
float: left;
}
.flbx{
margin-top: 10px;
margin-left: 20px;
}
</style>
</head>
<body>
<form action="" method="" style="margin:200px auto;width: 500px;">
<div class="boxx">
<div class="lie">
<div class="fl">
<label for="male">第一次付息日期</label>
<input type="text" name="sex" id="male" />
</div>
<div class="fl flbx">
<a href="###" class="adds";>新增</a>
<a href="###" onclick="dels(this)";>删除</a>
</div>
</div>
</div>
</form>
</body>
<script src="js/jquery-1.8.2.min.js"></script>
<script>
var li = '<div class="lie"><div class="fl"><label for="male">第一次付息日期</label><input type="text" name="sex" id="male" /></div><div class="fl flbx"><a href="###" class="adds";>新增</a><a href="###" onclick="dels(this)";>删除</a></div></div>';
function dels( obj ){
if(confirm('确定要删除这条信息？')){
$(obj).parents('.lie').remove();
}
};
$(document).on('click','.adds',function(){
$(li).appendTo($('.boxx'))
})
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery
相关文章推荐
新的分享
章节导航