工作中遇到问题,在元素上添加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删除
}
结束。
问题有点啰嗦,表述不清,望谅解。