52,797
社区成员
发帖
与我相关
我的任务
分享一个页面有多个ajax请求
如何给一个页面上多个动态添加的元素绑定事件？其中动态添加的元素、绑定事件的方法体也都是通过ajax实现的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微博</title>
<style>
* {margin: 0;padding: 0;}
.lf {float: left;}
.rt {float: right;}
.clear {clear: both;}
ul {list-style-type: none;}
#box {width: 720px;height: 200px;margin: 20px auto;}
.sub {float: right;width: 150px;height: 30px;text-align: center;}
a {color: #000;text-decoration: none;}
#list {width: 720px;min-height: 100px;border: 1px solid #ddd;margin: 0 auto;box-sizing: border-box;padding: 10px 10px;}
#list>li {width: 100%;height: 80px;border-bottom: 1px solid #ddd;}
.content {width: 100%;min-height: 50px;}
.caozuo>.rt>a {display: inline-block;margin-right: 10px;}
.pageDiv {width: 720px;min-height: 100px;margin: 0 auto;}
.pageDiv ul {float: right;margin-top: 10px;}
.pageCount li {
width: 25px;
height: 25px;
text-align: center;
background: #fff;
border: 1px solid #c0c0c0;
list-style: none;
float: left;
}
.caozuo span {margin-left: -3px;}
</style>
</head>
<body>
<div id='box'>
<textarea name="textarea" id="put" cols="100" rows="10"></textarea><br>
<button id='btn' class='sub'>提交评论</button>
</div>
<ul id='list'>
<!-- <li>
<p class='content'></p>
<div class='caozuo'>
<a href="#" class='lf'>836236132</a>
<p class='rt'>
<a href="#"><img src="img/acc.jpg" alt="" ></a><span class='acc'>0</span>
<a href="#"><img src="img/ref.jpg" alt=""></a><span class='ref'>0</span>
<a href="#"><img src="img/del.jpg" alt=""></a><span class='del'>删除</span>
<span class='time'>2017-6-26</span>
</p>
</div>
</li>-->
</ul>
<div class="pageDiv">
<ul class="pageCount">
</ul>
</div>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload = function() {
var val = document.getElementsByTagName("textarea")[0];
var btn = document.getElementsByTagName("button")[0];
//载入页面时加载
//
getList(1);
btn.onclick = function() {
var ul = document.getElementsByTagName("ul");
ajax({
url: "php/weibo.php",
method: "get",
data: {
"act": "add",
"content": val.value
},
dataType: "json",
succ: function(res) {
var list = ul[0].getElementsByTagName("li");
if (list.length == 6) {
ul[0].innerHTML = "";
ul[1].innerHTML = "";
showPageList();
//getSomePage();
}
var str = "<li><p class='content'>" + val.value + "</p><div class='caozuo'>"
+ "<a href='#' class='lf'>836236132</a><p class='rt'>"
+ "<a href='#'><img src='img/ding.png' ></a><span class='acc'>0</span>"
+ "<a href='#'><img src='img/cai.png'></a><span class='ref'>0</span>"
+ "<a href='#'><img src='img/delete.png' ></a><span class='del'>删除</span>"
+ "<span class='time'>" + new Date().Format("YYYY-HH-MM") + "</span></p></div></li>";
ul[0].innerHTML = str + ul[0].innerHTML;
var lis = ul[0].getElementsByTagName("li");
for(var s=0;s<lis.length;s++){
var img = lis[s].getElementsByTagName("img");
for(var k=0;k<2;k++){
img[k].onclick = function(){
alert(this);
var span = lis[s].getElementsByTagName("span")[0];
span.innerHTML = span.value+1;
return false;
}
}
}
}
});
}
}
function getList(page) {
ajax({
url: "php/weibo.php",
method: "get",
data: {
"act": "get",
"page": page
},
dataType: "json",
succ: function(res) {
showPageList();
var ul = document.getElementsByTagName("ul")[0];
for (var i = 0; i < res.list.length; i++) {
var str = "<li><p class='content'>" + res.list[i].content + "</p><div class='caozuo'>" + "<a href='#' class='lf'>" + res.list[i].id + "</a><p class='rt'>" + "<a href='#'><img src='img/ding.png' ></a><span class='acc'>" + res.list[i].acc + "</span>" + "<a href='#'><img src='img/cai.png'></a><span class='ref'>" + res.list[i].ref + "</span>" + "<a href='#'><img src='img/delete.png' ></a><span class='del'>删除</span>" + "<span class='time'>" + res.list[i].time + "</span></p></div></li>";
ul.innerHTML += str;
}
//getSomePage();
}
});
}
//刷新页码
function showPageList(){
ajax({
url: "php/weibo.php",
method: "get",
data: {
"act": "get_page_count"
},
dataType: "json",
succ: function(res) {
//alert("hnfkud");
var ul = document.getElementsByTagName("ul");
for (var j = 1; j <= res.count; j++) {
var li = document.createElement("li");
li.index = j;
ul[1].appendChild(li);
li.innerHTML = j;
li.style.cursor = "pointer";
li.onclick = function() {
ul[0].innerHTML = "";
ul[1].innerHTML = "";
getList(this.index);
}
}
}
});
}
Date.prototype.Format = function(fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</script>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
