[IE7 jQuery] link click(): jQuery function body not reached .

Question

I'm trying to align the height of a sidebar div by the height of another div, accessed (show/hide) by clicking on a link. The solution I've implemented so far is to attach a function to each click, and set $('').height(height) for the sidebar div. 'Course, it doesn't work in IE7, although it's great in IE8 and firefox.

JS code:

     function BindResizeSideBar() {
        $('div#containerFloat div#tabs-box a').each ( function() {
            var targetId = this.getAttribute('href');
            if($('div#' + targetId).length == 0) return;
            $(this).bind('click', function() {
                var height = $('div#' + targetId).height() + 90;
                alert(targetId + ', ' + height);
                $('div#divSavedSearchesSideBar div.leftSide').height(height);
            });
        });
        // init: click on tabProfile;
        $('div#containerFloat div#tabs-box a[href=#tabProfile]').click();
    }

HTML structure:

<div#content-side.searchProspects>
    <div#sidebar style="float: left; width: 15%;">
    <div#divTabContainer>
        <div#header>
        <div#containerFloat>
            <div#tabs-box>
            <div#tabContent1>
            <div#tabContent2>
            ...
            <div#tabContent6>

Answer 1

do you call that function? And did it work in other browsers? Try this:

 function BindResizeSideBar() {
    $("div#containerFloat div#tabs-box a").each (function() {
        var targetId = $(this).attr("href"); // starts with #
        if($("div" + targetId).length == 0) return;
        $(this).bind("click", function() {
          var height = $("div" + targetId).height() + 90;
          alert(targetId + ', ' + height);
          $("div#divSavedSearchesSideBar div.leftSide").height(height);
        });
    });
    // init: click on tabProfile;
    $('div#containerFloat div#tabs-box a[href=#tabProfile]').click();
}

In your HTML code, an id is given by an id attribute, not by a #:

<div id="xxxxxx" ...></div>

Answer 2

If I'm not wrong what might be happening is that IE redirects your page to the specified href and in process cancelling any events you're trying to fire on the a tag.

Answer 3

Two more alert instructions later, and the problem was found. In IE7, this.getAttribute('href') returns the full address (http:// .... #tabIdentifier), while in other browsers (IE8 included) it returned the actual string in href, namely "#tabIdentifier".

Problem solved by adding a little string processing:

 targetId = targetId.substring(targetId.lastIndexOf('#'));