Solution When jQuery insertBefore in an iframe Under IE9 and IE10 Only Executes Once

The implementation code is as follows:

//Cancel the selection of the sorted row
$(‘#checkout’).live(‘click’,function(e){
if(!$(e.target).parent().hasClass(‘goods_row’)){
$(‘#checkout tr’).removeClass(‘select-tr’);
}
});
//Sorting, select the object to move
$(‘#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’))
{//Bundle sale
$(‘#checkout tr’).not($(‘.’+self.attr(‘merge_check’))).removeClass(‘select-tr’);
$(‘.’+self.attr(‘merge_check’)).toggleClass(‘select-tr’);
}else
{//Single item sale
$(‘#checkout tr’).not(self).removeClass(‘select-tr’);
self.toggleClass(‘select-tr’);
}
}
});
//Swap order
$(document).keydown(function(e){
if($(‘.select-tr’).length>0 && !$(e.target).hasClass(‘goods_number’)){
var key = (e.keyCode) || (e.which) || (e.charCode);//Compatible with IE(e.keyCode) and Firefox(e.which)
if(key==38){//Up
var prev = $(‘.select-tr:first’).prev();
// If the previous row has the class name goods_row, it can be moved up; otherwise, it is an original product and cannot be moved up
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){//Down
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;
}
}
});

Initially, I found that everything ran normally in Firefox, Chrome, and IE7/8. However, in IE9/10, it only ran correctly when opened in a new tab, and failed when embedded directly in an iframe. The reason seems to be that after executing insertAfter once, the focus is no longer inside the iframe, so it no longer responds to keydown (keyboard events). To solve this issue, I decided to call focus() on an element within the iframe. However, I discovered that .select-tr itself and its parent elements no longer support focus(). Using the previous sibling of .select-tr’s topmost parent element did work, but it caused the scrollbar to constantly jump to the top. The final solution I came up with is as follows:

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

I realized that although .select-tr itself and its parent elements no longer support focus(), the input element inside it still does!