jQuery selector is not working in IE only

Question

There is a legacy site that I'm working on, and I need to swap out a logo image when a certain link is clicked. This works in both firefox and chrome, but not in IE.

To add to the complexity of the issue, the page containing the script is nested within three framesets. The link is in the same frameset as the script, but the logo is up in the top frame.

$('a.reset-logo').click(function() {
    var img = '../images/img1.gif';

    var $img = $('img.header-image', window.parent.top.frames[0].document);

    //testing
    //shows the correct src in chrome/firefox -- undefined in IE    
    //alert($img.attr('src'));

    $img.attr('src', img);
});

Yes, I have to maintain the use of frames. This is not a rewrite, just a maintenance issue. I've been banging my head against a wall on this for far too long.

I've tried changing the context to window.top.frames[0].document with the same result, among some others. The issue lies within the selector, and I just can't seem to pinpoint what it is.

Answer 1

I was able to get it to work by changing my script to the following:

<script type="text/javascript">
    $(document).ready(function () {
        $('a.reset-logo').click(function (e) {
            var theFrame = window.parent.top.frames[0].document;
            var theSrc = '../images/img1.jpg';

            $(theFrame).find('img.header-image').attr('src', theSrc);
        });
    });
</script>

Answer 2

Does http://jsfiddle.net/TJVuY/4/ help? I took away window.parent.top.frames[0].document- it wasn't needed as it was reffering to the document itself, and now it works in IE 8.