文档章节

事件源对象在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

没有更多内容

加载失败,请刷新页面

加载更多

线性一致性和 Raft

作者:沈泰宁 在讨论分布式系统时,共识算法(Consensus algorithm)和一致性(Consistency)通常是讨论热点,两者的联系很微妙,很容易搞混。一些常见的误解:使用了 Raft [0] 或者 paxos ...

TiDB
16分钟前
0
0
兄弟连区块链教程以太坊源码分析core-state-process源码分析

## StateTransition状态转换模型 /* The State Transitioning Model 状态转换模型 A state transition is a change made when a transaction is applied to the cu......

兄弟连区块链入门教程
18分钟前
0
0
linear-gradient渐变中的参数

在看张鑫旭的博客 遇到渐变数值后面带参数不太理解 @supports (-webkit-mask: none) or (mask: none) { .box { border: none; background: linear-gradient(to bottom, #34538...

红羊在厦门
19分钟前
0
0
Python yagmail模块自动发邮件

Python发邮件yagmail模块 import yagmail#连接服务器yag=yagmail.SMTP('xx@163.com','yy','smtp.163.com')#邮箱正文contents=["test","email send"]#发送邮件#yag.send('...

小白兔_球球
20分钟前
1
0
pada mysql

CREATE SCHEMA `exchange` DEFAULT CHARACTER SET utf8mb4 ;

qwfys
29分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部