在IE9、IE10下如果在iframe中执行了jquery中的insertBefore等,导致只能够执行一次的解决方案!

选择某一行后,可以连续地向上、向下插入,也可以说是移动了的!

选择某一行后,可以连续地向上、向下插入,也可以说是移动了的!

实现代码如下:

//取消选中排序的行
$(‘#checkout’).live(‘click’,function(e){
if(!$(e.target).parent().hasClass(‘goods_row’)){
$(‘#checkout tr’).removeClass(‘select-tr’);
}
});
//排序,选择要移动的对象
$(‘#checkout .goods_row’).live(‘click’,function(e){
if(!$(e.target).hasClass(‘goods_row’) && !$(e.target).hasClass(‘goods_number’)){
var self = $(this);
if(self.attr(‘merge_check’))
{//套装销售
$(‘#checkout tr’).not($(‘.’+self.attr(‘merge_check’))).removeClass(‘select-tr’);
$(‘.’+self.attr(‘merge_check’)).toggleClass(‘select-tr’);
}else
{//单品销售
$(‘#checkout tr’).not(self).removeClass(‘select-tr’);
self.toggleClass(‘select-tr’);
}
}
});
//交换顺序
$(document).keydown(function(e){
if($(‘.select-tr’).length>0 && !$(e.target).hasClass(‘goods_number’)){
var key = (e.keyCode) || (e.which) || (e.charCode);//兼容IE(e.keyCode)和Firefox(e.which)
if(key==38){//向上
var prev = $(‘.select-tr:first’).prev();
// 如果上一行含有类名goods_row,则可以向上移动,否则便是原有的商品,不能够向上移动
if(prev.attr(‘merge_check’)){
$(‘.select-tr’).insertBefore($(‘.’+prev.attr(‘merge_check’)+’:first’));
}else{
$(‘.select-tr’).insertBefore(prev);
}
$(“.select-tr .change_goods_number”).focus();
$(“.select-tr .change_goods_number”).blur();
return false;
}else if(key==40){//向下
var next = $(‘.select-tr:last’).next();
if(next.attr(‘merge_check’)){
$(‘.select-tr’).insertAfter($(‘.’+next.attr(‘merge_check’)+’:last’));
}else{
$(‘.select-tr’).insertAfter(next);
}
$(“.select-tr .change_goods_number”).focus();
$(“.select-tr .change_goods_number”).blur();
return false;
}
}
});

最初发现在firefox、chrome、IE7/8等浏览器下全部运行正常,而在IE9/10下,必须新开标签页才能够运行正常,而不能够直接嵌入iframe中运行,原因在于好像执行了一次insertAfter之后,其焦点已经不在iframe中了,对于keydown(键盘事件)再无响应,为了解决此问题,便决定在iframe中某一元素上实现focus(),结果却发现.select-tr本身及其父元素已经不支持focus()了,如果采用.select-tr的最顶层父元素的上一个元素倒是可以的,但是却会出现滚动条一直在顶部的情况,最后想出的解决方法如下:

$(“.select-tr .change_goods_number”).focus();
$(“.select-tr .change_goods_number”).blur();

因为发现虽然.select-tr本身及其父元素已经不支持focus()了,但是其中的类型为input还是支持focus()的!

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/250812.html

(0)
上一篇 2022年5月1日
下一篇 2022年5月1日

相关推荐

发表回复

登录后才能评论