JavaScript while循环无法在IE8中呈现html

Question

EDIT: ( SEE ANSWER BELOW )

I've been a long time viewer of stackoverflow but my first question today since I didn't found any answer anywhere... I have a strange behavior with my javascript code. I've tried a lot of different way but never been able to correct the problem. What I want is to collapse and expand some element when I click on a button... Normally it would be simple and it's working In Chrome but not in IE8.

• There is no error message
• He enter the loop but do not had the class or the toggle to my element.

• here is my javascript code:

   function collapseClick(obj) { var group = $(obj).attr('data-maingroup'); console.log("collapseClick on group:" + group); console.log("obj class before:" + $(obj).attr('class')); if ($(obj).hasClass("toggleExpand")) { $(obj).addClass("toggleMinus"); $(obj).removeClass("toggleExpand"); } else { $(obj).removeClass("toggleMinus"); $(obj).addClass("toggleExpand"); } console.log("obj class after:" + $(obj).attr('class')); $('div[data-group="' + group + '"]').each(function (index, item) { console.log("div loop for group:" + group + " index:" + index); $(this).toggle(); }); 

  }

here is my Html that is rendered:

<div id="chart">
   <div class="leftPart">
     <div class="header">name</div>
     <div class="item parent">
       <a id="collapse_Integrated_Planning" onclick="collapseClick(this);return false;" style="float:left;" class="leftcollapse toggleMinus" data-maingroup="Integrated Planning"></a>Integrated Planning
     </div>
    <div class="item child gantShow" data-group="Integrated Planning">John Smith</div>
    <div class="item child gantShow" data-group="Integrated Planning">Alex Smith</div>    
  </div>
  <div class="gantMainControl" id="gantControl">
     <div class="header">
        <div class="headerRow"> 
           <div class="headerRowYear" id="headerYear">
               <div class="headerCellYear" style="width:1499.5983985355874px">2013</div>
          </div>
        </div>
   <div class="headerRow">
       <div class="headerCellMonth" style="width:126.42890508110469px">January</div>   
       <div class="headerCellMonth" style="width:114.1938497506752px">February</div>
       <div class="headerCellMonth" style="width:126.42890508110469px">March</div>
       <div class="headerCellMonth" style="width:122.35055330429486px">April</div><div class="headerCellMonth" style="width:126.42890508110469px">May</div>
       <div class="headerCellMonth" style="width:122.35055330429486px">June</div>
       <div class="headerCellMonth" style="width:126.42890508110469px">July</div><div class="headerCellMonth" style="width:126.42890508110469px">August</div>
       <div class="headerCellMonth" style="width:122.35055330429486px">September</div>
       <div class="headerCellMonth" style="width:126.42890508110469px">October</div>
       <div class="headerCellMonth" style="width:122.35055330429486px">November</div>
       <div class="headerCellMonth" style="width:126.42890508110469px">December</div>
   </div>
 </div>
 <div class="container">
     <div class="timelineContainer" style="width: 1503px;"></div>
 </div>
 <div class="container gantShow" data-group="Integrated Planning">
     <div class="timelineContainer child" style="width: 1503px;">
        <div class="timeline" style="width:722.9598440425635px;margin-left:772.560202716214px" title="2013/07/08 - 2013/12/31&lt;br&gt;&lt;/div&gt;Integrated Planning" onclick="onTimelineClick(this)" data-id="159c5c97-c135-4906-970c-e4d58f647c41" data-startdate="2013/07/08">100%</div>
        </div>
     </div>
 <div class="container gantShow" data-group="Integrated Planning">
     <div class="timelineContainer child" style="width: 1503px;">
         <div class="timeline" style="width:949.2691917671041px;margin-left:546.2508549916735px" title="2013/05/14 - 2013/12/31&lt;br&gt;&lt;/div&gt;Integrated Planning" onclick="onTimelineClick(this)" data-id="5c3756b1-0674-4bfc-b6ce-fa765db63eed" data-startdate="2013/05/14">100%</div>
     </div>
 </div>

Here is my console log:

LOG: collapseClick on group:Integrated Planning
LOG: obj class before:leftcollapse toggleMinus
LOG: obj class after:leftcollapse toggleExpand
LOG: div loop for group:Integrated Planning index:0
LOG: div loop for group:Integrated Planning index:1
LOG: div loop for group:Integrated Planning index:2
LOG: div loop for group:Integrated Planning index:3

I really need help this IE8 problem begin to annoyed me a lot...

ANSWER:

I've found the answer to my question.

The problem was related with how chrome and IE handle the resize event.

I had another javascript function that was called on the resize of the browser (

   $(window).resize(function () {
        console.log("resize");
        config.zoomLevel = ($(window).width() - 200) / 421.739; //magic formula to know how many pixel is entering in the screen for the chart.
        createGantControl(('#' + mainControlId), config);
    });

).

This function was regenerating my graph.

• when you change css value, Chrome doesn't call the resize event.
• BUT when you change css value in IE, IE recall the resize so my graph was always rerender.

Hope it can help in the futur!
-Jeff

Answer 1

I've found the answer to my question.

The problem was related with how Chrome and IE handle the resize event.

I had another JavaScript function that was called on the resize of the browser:

$(window).resize(function () {
     console.log("resize");
     //magic formula to know how many pixel is entering in the screen for the chart
     config.zoomLevel = ($(window).width() - 200) / 421.739;
     createGantControl(('#' + mainControlId), config);
});

This function was regenerating my graph.

• When you change CSS value, Chrome doesn't call the resize event.
• BUT when you change CSS value in IE, IE recalls the resize event so my graph was always rerender.