侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

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

2023-12-16 星期六 / 0 评论 / 0 点赞 / 39 阅读 / 3379 字

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

工作中遇到问题,在元素上添加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删除
}

结束。

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

广告 广告

评论区