场景:在一个大类的下面添加单元内容
具体需求:在当前页面中插入一个input和button,input为输入内容,button为提交。
上代码,先构建个demo
页面内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> jquery添加元素并绑定事件</title>
<style type="text/css">
div{
border:1px solid red;
width:100px;
height:100px;
display:inline-block;
margin:20px;
}
</style>
<script type="text/javascript" src="../common/jquery.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
首先引入jquery,然后创建3个div
第一个需求是给相应的内容添加元素,经常用的有append方法,但我们也会遇到给选定的位置前面添加,给后面添加等不同的需求,正好jquery是全部都有。
append方法,给指定位置内部添加元素
before方法,给指定位置前面添加元素
after方法,给指定位置后面添加元素
$(document).ready(function(){
var str = "<button class='test'>我是天津的</button>";
$('.one').append(str);
$('.two').before(str);
$('.three').after(str);
});
生成的代码:
<div class="one"><button class="test">我是天津的</button></div>
<button class="test">我是天津的</button><div class="two"></div>
<div class="three"></div><button class="test">我是天津的</button>
第二个需求是给生成的按钮绑定事件
这里用到jquery的bind方法
bind(type, [data], function) 其中data可选
我们用到的是button的click方法,所以给button绑定click方法。完整的代码:
$(document).ready(function(){
var str = "<button class='test'>我是天津的</button>";
$('.one').append(str);
$('.two').before(str);
$('.three').after(str);
$('.one').bind('click', test);
});
function test(){
var str = "that's right";
$(this).after(str);
}
点击button后生成的代码:
<div class="one"><button class="test">我是天津的</button></div>that's right
<button class="test">我是天津的</button><div class="two"></div>
<div class="three"></div><button class="test">我是天津的</button>
OK,nice,搞定。