Need help tracking down a jQuery bug

Question

I've been working on a popup window that interacts with the window.opener. I found a specific problem with IE not working when trying to append an object. I've set up a demo page here.

Basically what the demo does is opens a popup window with a button. It is intended to highlight portions of the page as I described in my previous question.

In the demo, clicking on the popup window button appends two divs to the window.opener. One div is added as a string and the second is added as an object. I get an error in IE when trying to append an object. Here is the javascript:

$(':button').click(function(){
 $('#clicked').empty().show().html('Click detected!').fadeOut();
 var str = '<div class="highlight" style="position:absolute;height:50px;width:50px;left:150px;top:100px;background:#fc0;zIndex:99;">str</div>';
 var obj = $('<div/>', {
  'class': 'highlight',
  css: {
   position:   'absolute',
   height:     '50px',
   width:      '50px',
   left:       '100px',
   top:        '100px',
   background: '#08f',
   zIndex:     99
  }
 }).html('obj');
 try { $(window.opener.document.body).append(obj); } catch(err) { alert(err.description) };
 $(window.opener.document.body).append(str);
})

So, I'm asking for help in tracking down the problem with jQuery.

Answer 1

I don't think that IE will let you append an element created in one window into the DOM of another window. It's really picky about that. Similarly, it gets freaked out sometimes if you pass constructed Javascript objects from one window to another, especially if the creating window later goes away.

Try using window.opener.$("<div/>") to create your element.