没有不值得去解决的问题,也没有不值得去学习的技术!

在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()的!

需要长期技术维护或远程问题排查?

我是拥有 15+ 年经验的 PHP / Go 后端工程师,长期关注已有系统维护、Bug 修复、性能优化、服务器排查、WordPress 网站维护和小功能迭代。

如果你的项目遇到以下情况,可以先从一次小问题排查开始合作:

  • ✅ PHP / Laravel / Yii2 老项目无人维护
  • ✅ Go / Gin 后端接口需要排查或优化
  • ✅ WordPress 网站访问慢、报错或插件冲突
  • ✅ Nginx / MySQL / Redis / Linux 服务器异常
  • ✅ CDN / Cloudflare / DNS / HTTPS 配置问题
  • ✅ 需要长期远程技术支持或兼职维护

更多介绍请查看:关于我 & 合作

微信:13980074657
邮箱:shuijingwanwq@gmail.com
Telegram:@shuijingwan
GitHub:https://github.com/shuijingwan

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理