文档章节

事件源对象在ajax回调函数中无法获取

 泪眼看世界
发布于 2015/03/23 20:03
字数 541
阅读 25
收藏 0

工作中遇到问题,在元素上添加onclick事件,传入参数event, 获取的时间源对象,在ajax回调函数中不好用,事件源对象可以获取。但达不到想要的效果。

场景描述:

<div class="shop">

<h2>店铺标题</h2>

 <div class="shop-item" id="程序取的商品id"><span>商品信息</span><a onclick="deleteCart(event)">删除</a></div>

<div class="shop-item" id="程序取的商品id"><span>商品信息</span><a onclick="deleteCart(event)">删除</a></div>

</div>

点击删除,删除购物车商品,当店铺下无商品时同事删除整个店铺。

错误用法:ajax调用,在回调函数中将购物车中商品删除,当店铺下无商品时,然后在调用事件源对象找到其父级shop。将其删除,此时通过事件源对象取不到class="shop"的div层。但是却能取到已经删除的class="shop-item"的div层。(在非ajax调用时不存在此情况。)

function deleteCart(cartId,e){
 
 var url = "${fn:getLink('cart/myCart.do?method=deleteCart')}&cartId="+cartId;  
 $.ajaxLoad({
     //请求的url为xxx.do,后面带一个method的参数
     url:url,
     callback:function(json) {
       if(carti==cartId){//id为购物车商品行
        $(cartuli).remove();
       }
      afterDelete(e);
     },
     dataType:"json",
     type:"post"
 });
}

function afterDelete(e){
 var eventSource = e.srcElement ? e.srcElement : e.target;
 var $eventSource = $(eventSource);//事件源对象
 $eventSource.parents('.shop').remove(); //无法将shop删除
 }

解决办法:不要在ajax回调函数中删除商品行,在判断shop下面有无其他商品。先判断shop下面是否只有要删除的当前商品,如果是,直接将整个class="shop"的div删除。

function deleteCart(cartId,e){

var url = "${fn:getLink('cart/myCart.do?method=deleteCart')}&cartId="+cartId;  
$.ajaxLoad({
    //请求的url为xxx.do,后面带一个method的参数
    url:url,
    callback:function(json) {
       //if(carti==cartId){//id为购物车商品行
        //$(cartuli).remove(); 
      // }将此处注释掉,不要事先删除事件源所在的行
      afterDelete(e);//可以正常删除shop层
     },
    dataType:"json",
    type:"post"
});
}

function afterDelete(e){
var eventSource = e.srcElement ? e.srcElement : e.target;
var $eventSource = $(eventSource);//事件源对象
$eventSource.parents('.shop').remove(); //无法将shop删除
}

结束。

问题有点啰嗦,表述不清,望谅解。

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 2
码字总数 2315
作品 0
济南
程序员
私信 提问
Java程序员从笨鸟到菜鸟之(八十九)跟我学jquery(五)jquery中的ajax详解

Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统...

长平狐
2012/11/12
293
0
【 JS进阶 ]】分析JS中的异步操作

JS因为是单线程的,所以在执行事务的时候,往往会因为某个事务的延迟,而导致服务器假死,这时候异步编程就显的格外重要,但是异步编程一般理解为回调函数callback,典型的就是node,回调函数...

课工场CC老师
2017/10/29
0
0
JavaScript Promise查缺补漏

原文链接 Promise简介 ECMAscript6原生提供了Promise对象,由浏览器直接支持,目前大多数浏览器都已经实现了,低版本浏览器可以使用es6-promise库来填平兼容性问题。Promise最大的好处是把执...

bestvist
2018/04/24
0
0
跟我学jquery(五)jquery中的ajax详解 .

Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统...

挨踢人生
2012/07/27
0
0
详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJ

只有$.ajax是以一个完整的对象{}来发送请求的,其他的比如$.get(),$.post()都不是. 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参...

文文1
2015/03/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jmeter参数的AES加密使用

在Jmeter日常实践中,大家应该都遇到过接口传参需要加密的情况。以登陆为例,用户名和密码一般都需要进行加密传输,在服务端再进行解密,这样安全系数会更高,但在使用jmeter进行接口测试的时...

程序猿拿Q
1分钟前
0
0
MYSQL 日期函数 Date and Time Functions

Table 12.13 Date and Time Functions Name Description ADDDATE() Add time values (intervals) to a date value ADDTIME() Add time CONVERT_TZ() Convert from one time zone to another ......

_liucui_
7分钟前
0
0
Android代码混淆ProGuard工作原理简介

ProGuard能够对Java类中的代码进行压缩(Shrink),优化(Optimize),混淆(Obfuscate),预检(Preveirfy)。    1. 压缩(Shrink): 在压缩处理这一步中,用于检测和删除没有使用的类,字段...

SuShine
10分钟前
0
0
Idea 2018激活

教程地址: https://www.52pojie.cn/thread-781394-1-1.html 亲测可用

一个不正经的程序员
15分钟前
0
0
Android组件化开发实践和案例分享

目录介绍 1.为什么要组件化 1.1 为什么要组件化 1.2 现阶段遇到的问题 2.组件化的概念 2.1 什么是组件化 2.2 区分模块化与组件化 2.3 组件化优势好处 2.4 区分组件化和插件化 2.5 applicatio...

潇湘剑雨
16分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部