文档章节

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

 泪眼看世界
发布于 2015/03/23 20:03
字数 541
阅读 20
收藏 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
195
0
【 JS进阶 ]】分析JS中的异步操作

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

课工场CC老师
2017/10/29
0
0
跟我学jquery(五)jquery中的ajax详解 .

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

挨踢人生
2012/07/27
0
0
angular之 $watch 和$digest 和$apply和$observe的区别

$watch 代表的就是对数据源的监听,当数据源发生变化,就会触发第二个参数的回调函数 $digest 代表触发一个数据源变化的事件 $apply 代表对于$digest的一个封装,他多了一个参数 。 $watch 第...

bosscheng
2015/10/12
199
0
详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJ

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

文文1
2015/03/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Minifilter的动态安装、加载及卸载

MINIFILTER框架的文件系统过滤驱动,无法使用的CreateService和OpenService进行动态加载。 看了一下,使用Inf文件安装Minifilter驱动的方式是在注册表驱动服务项下比传统驱动多创建了Instanc...

simpower
24分钟前
1
0
idea新建springCloud项目(6)- Config Server使用

1.在IDEA新建springCloud项目-Config Server 修改版本,和之前建的eureka项目版本一致,修改完记得刷新: 删除掉不需要的文件: 2.把Config S 服务注册到eureka上去,配置git地址,启动项目 ...

monroeCode
30分钟前
3
0
大数据可视化项目开发总纲

第1章 开发文档总纲 1.1 开发工具清单 名称 版本 备注 Pentaho-bi server pentaho-server-ce-7.1 Pentaho Cde为其内置工具 Pentaho-prd pentaho-prd-ce-7.1 Pentaho Report Designer报表工具...

ZhangLG
30分钟前
2
0
pip安装超时问题

pip3 install --default-timeout=100 tensorflow 设置为100秒 参考: User Guide How to solve ReadTimeoutError: HTTPSConnectionPool(host='pypi.python.org', port=443) with pip?......

亚林瓜子
32分钟前
1
0
fragment 旋转时保持当前实例

设备旋转时保存Fragment的交互状态: setRetainInstance(true);

zdglf
34分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部