事件源对象在ajax回调函数中无法获取
事件源对象在ajax回调函数中无法获取
泪眼看世界 发表于3年前
事件源对象在ajax回调函数中无法获取
  • 发表于 3年前
  • 阅读 15
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

摘要: 事件源对象在ajax回调函数中无法获取解决办法

工作中遇到问题,在元素上添加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
×
泪眼看世界
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: