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

jquery学习笔记之动态添加元素绑定事件

2016-03-03 21:31 746 查看

这两天做项目涉及到页面上的设计，用到一些jquery，记录一下学习的成果。都是一些小的零散的知识点，大神不要见笑。

1.jquery动态添加元素时需要绑定事件。demo如下：

没有绑定事件时：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$("#addBtn").click(function(){
//点击之后在content DIV中添加一个如下的DIV
//这里是追加，用append(),不能用html();
//选取当前元素的父元素，append（）
//这里当然可以用$("#content"),复习一下jquery的遍历
$(this).parent().append('<div><input type="text"/><button class="delBtn">删除</button></div>');
});
//点击删除按钮后，删除其存在的div
$(".delBtn").click(function(){
$(this).parent().remove();
});
});
</script>
<title>jquery动态添加元素需要绑定事件</title>
</head>
<body>
<div id="content">
<button id="addBtn">添加一行</button>
<div><input type="text"/><button class="delBtn">删除</button></div>
</div>
</body>
</html>

这样写看起来没有什么问题，但是写好之后却发现，只有一开始就在页面上写上去的DIV里面的button事件可以执行，其他的通过添加按钮添加上去的都不能删除。

接下来我换一种写法，也就是所谓的绑定事件

<script>
//动态添加事件
$(document).on("click",".delBtn",function(){
$(this).parent().remove();
});
$(document).ready(function(){
$("#addBtn").click(function(){
//点击之后在content DIV中添加一个如下的DIV
//这里是追加，用append(),不能用html();
//选取当前元素的父元素，append（）
//这里当然可以用$("#content"),复习一下jquery的遍历
$(this).parent().append('<div><input type="text"/><button class="delBtn">删除</button></div>');
});
//点击删除按钮后，删除其存在的div
/*$(".delBtn").click(function(){
$(this).parent().remove();
});*/
});
</script>

这种写法，就能很好的解决这个问题了。

$(document).on("事件名","类名或其他",function(){});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航