使用ajax后获取元素的方法以及事件委托的使用
来源:互联网 发布:默纳克刷机软件 编辑:程序博客网 时间:2024/06/09 19:17
我们前端开发经常用到ajax请求,使用最多的无疑是li的循环了,然后append到DOM树上,然后此时要操作li的某些交互时,是获取不到元素的,此时我们可以这样做:
$("body").on("touchend","选择器",function(){
// 要折行的交互。
});
下面说一下事件委托的使用,什么是事件委托我就不啰嗦了,小伙伴可以去百度一下:
这里的操作是:点击删除,弹出一个是否删除的弹窗,点击确定后删除当前一条的评论。
html代码:
<ul class="good-message-list" id="J-good-message-list">
<li class="clearfix">
<a class="left-user-icon">
<img src="images/user_img.png">
</a>
<ul class="right-message-box">
<li class="clearfix user-bar">
<a class="user-name">浅夏、下雨</a>
<i class="like-numb js-like-btn"><input type="text" UNSELECTABLE="on"/></i>
</li>
<li class="date-bar">昨天</li>
<li class="message-txt">整体视觉方向还OK,但是有些细节、逻辑、易操作性上还要有所改进。</li>
<li class="delete"><em>删除</em></li>
</ul>
</li>
<li class="clearfix">
<a class="left-user-icon">
<img src="images/user_img.png">
</a>
<ul class="right-message-box">
<li class="clearfix user-bar">
<a class="user-name">浅夏、下雨</a>
<i class="like-numb js-like-btn"><input type="text" UNSELECTABLE="on"/></i>
</li>
<li class="date-bar">昨天</li>
<li class="message-txt">整体视觉方向还OK,但是有些细节、逻辑、易操作性上还要有所改进。</li>
<li class="delete"><em>删除</em></li>
</ul>
</li>
</ul>
js代码:
// 找到父元素,添加事件...
document.getElementById("J-good-message-list").addEventListener("click",function(e) {
// e.target是被点击的元素!
// 如果被点击的是li元素
if(e.target && e.target.nodeName == "LI") {
//不知道e.target是什么的小伙伴可以打印看看是什么console.log(e.target);
//然后就执行删除,我就不写那么详细了(删除的弹窗就不弹出来了)
e.target.parentNode().parentNode().remove();
}
});
jq代码:
$("body").on("touchend",".delete",function(){
$("#mask").show();
$("#mask_modal").show();
var self = $(this);
/*****点击确定*****/
$(".mask-box-right").on("touchend",function(){
$("#mask").hide();
$("#mask_modal").hide();
console.log(self);
self.parent().parent().remove(); //这里的self就是外层的$(this),可以在外层打印看看$(this)指的是谁这样就知道了
});
});
- 使用ajax后获取元素的方法以及事件委托的使用
- 使用 jquery 事件委托的 on 方法
- 委托和事件的使用
- C#委托事件的使用
- 委托的学习以及使用
- 委托的应用之二:使用多播委托编码Observer模式。以及事件的引入
- jq 获取第一个child的方法 以及ajax成化工和返回之后,怎么去使用触发该时间的元素
- jQuery加载方法以及ajax的使用
- 关于委托、事件、处理事件的方法以及.NET
- C#基础精华07(委托事件,委托的使用,匿名方法)
- 委托的方法与使用
- 获取经纬度方法的使用以及常见问题
- 手机浏览器 使用事件委托 点击非可点元素的默认点击效果问题
- 在C#的事件、多播中使用委托
- C#事件与委托的关系【使用】
- C#中事件和委托的使用
- swift UITextField的使用,及事件委托
- Edittext不自动获取焦点解决方法以及获取焦点后的事件实现方法
- MultiSelect使用!
- TCP的三次握手(建立连接)和四次挥手(关闭连接)
- 关于XE8开发安卓手机硬件
- 自定义Quartz超实用工具类
- c++之友元类
- 使用ajax后获取元素的方法以及事件委托的使用
- leetcode 154. Find Minimum in Rotated Sorted Array II(二分+递归)
- js 表格查询+升序降序+敏感词
- 在pcl用例中获取kinect深度图像数据,并用opencv显示出来
- LeetCode--Minimum Path Sum (最小路径和)Python
- C++ 递归实现简单语言解释器
- “懂你”才叫人工智能 根本不用担心AI抢你饭碗
- 表单只读不能编辑
- PHP 大神的十大优良习惯