With a list of items where all are hidden by default, the first li
has a display
of block
. The problem is that this won't update if the first element is removed, de facto making a new first-child which should be displayed. In Safari the new li
that should show is not displayed.
HTML
<ul class="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
<button>click me </button>
CSS
.list .item { display: none }
.list .item:first-child { display:block}
JS
$('button').on('click', function(e) {
$('ul li:first').remove().appendTo($('ul'));
});
See the fiddle: http://jsfiddle.net/BFTan/1/
In all other browsers clicking the button will cycle through the items but in Safari nothing updates.
.appendTo($('ul'));
can be better written as.appendTo('ul');
I don't think that will solve it, but it will help load time. Also, did you try adding a DOM ready function? See here jsfiddle.net/BFTan/2