Numbers of an ordered list turn into 0 while clicking through jquery tabs

Question

I have a page with jQuery tabs on it. In those tabs is an ordered list.

This is my html code:

<div id="tabs">

  <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>

  <div id="tabs-1">
      <ol start="50">
          <li>Bibendum Elit</li>
          <li>Vehicula</li>
          <li>Amet Bibendum Ultricies</li>        
      </ol>
  </div>

  <div id="tabs-2">
      <ol>
          <li>Sollicitudin Cras Vehicula</li>
          <li>Vulputate Euismod</li>
          <li>Ridiculus Vehicula Pharetra Nullam</li>        
      </ol> 
  </div>

  <div id="tabs-3">
      <ol>
          <li>Ullamcorper Parturient</li>
          <li>Tristique Mollis Venenatis Vehicula</li>
          <li>Vulputate Bibendum</li>        
      </ol>  
  </div>
</div>

and this is my javascript:

$(function() { $( "#tabs" ).tabs(); });

See: http://jsfiddle.net/2ewzz/1/

When i view this in IE9, and i click from the first tab to the second tab and then back to the first tab again, the numbers are all changed to "0"

Does anyone know what i'm doing wrong, or how to solve this problem?

Answer 1

This seems to be an issue in IE itself looking at this related question.

I was able to get this fixed by recreating the counter on the list items when selecting the tab once again.

$(function() {
    $( "#tabs" ).tabs({
        select: function(event, ui){
            var ol = $($(ui.panel).children()[0]);
            setTimeout(function(){
            ol.children().css("counter-reset", "item")
            }, 1);
        }
    });
});

Check out this jsFiddle for a working example