load() + Lightbox doesn't work on IE 8 only

This time, it's a little bit different from my previous posts. So I decide to make a new one.

FYI, I use Lightbox plugin from this: http://leandrovieira.com/projects/jquery/lightbox/

ePC.html = contain an image with lightbox effect (work with IE, Chrome, Firefox).

reviews.html = Home page. connect to scripts/script.js. (Contain the .load() function, loading ePhone.html or ePC.html by clicking on one of those 3 links). Please Ignore "ePhone.html". Below is the scripts/script.j开发者_运维百科s file:

$(document).ready(function() {
    //ePhone link is clicked. Open ePhone.html PLEASE IGNORE THIS LINK.
    $('#linkEPhone').click(function() {
        $('#apDiv2').load('ePhone.html');
    });

    //ePC link is clicked. Open ePC.html
    $('#linkEPC').click(function() {
        $('#apDiv2').load('ePC.html', function () {
             $('a[@rel*=lightbox]').lightBox();
       });

    });

    //ePC2 link is clicked. Open the <div> section of ePC.html. The image is located inside the <div> section.
    $('#linkEPC2').click(function() {
                $('#apDiv2').load('ePC.html #content', function () {
                 $("head").append($("<link rel='stylesheet' href='css/jquery.lightbox-0.5.css' type='text/css' media='screen' />"));
                 $.getScript('js/jquery.js', function() {
                  $.getScript('js/jquery.lightbox-0.5.js', function() {
                         $('a[@rel*=lightbox]').lightBox();
                 });
                });
       });

    });
});

The problem is with the third one above: $('#apDiv2').load('ePC.html #content', function () {...

'#content is id. ANd the picture is within the tag within "ePC.html"

<div id=content>
<a rel="lightbox" href="images/bird.jpg"><img src="images/bird_s.jpg" width="72" height="72" alt="" /></a>
</div>

It WORKS 100% on Chorme and Firefox but NOT Internet explorer 8!!!!. (I understand why people hate IE now..) IE crashed!. I later fixed this crashing problem by removing the !DOCTYPE..within "reviews.html" Ok with !DOCTYPE removed, IE doesn't crashed anymore. HOWEVER, the lightbox CSS DOES NOT APPLIED to the image!

Other methods that I have tried but didn't work: *1. "live" instead of "load":*

$('#linkEPC2').click(function() {
                    $('#apDiv2').live('load', 'ePC.html, #content', function(){
                     $("head").append($("<link rel='stylesheet' href='css/jquery.lightbox-0.5.css' type='text/css' media='screen' />"));
                     $.getScript('js/jquery.js', function() {
                      $.getScript('js/jquery.lightbox-0.5.js', function() {
                             $('a[@rel*=lightbox]').lightBox();
                     });
                    });
           });

        });

This one doesn't work at all. Even the image is not there at all. So I guess I may stick with the "load()" function instead.

2. I've also tried putting these 3 lines into the div section:

<div id=content>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <a rel="lightbox" href="images/bird.jpg"><img src="images/bird_s.jpg" width="72" height="72" alt="" /></a>
    </div>

but it doesn't work neither..

---

I had the same problem and noticed a few things about the jQuery load in IE:

1. It doesn't accept the syntax of 'load("href selector",function()...' (while chrome and FireFox do accept this syntax).
2. The loaded html should not include tags.