JQuery мобильных дублирующих автодиверов
У меня есть список, но когда я пытаюсь сгенерировать автодиваторы для этого списка, я получаю дубликаты делителей. Вот код для ul и соответствующий скрипт:
<div data-role="content">
<ul data-role="listview" id="ScheduleList" data-autodividers="true">
<li time="3:30PM"><a href="#">Event 1</a></li>
<li time="3:30PM"><a href="#">Event 2</a></li>
<li time="4:30PM"><a href="#">Event 3</a></li>
<li time="3:30PM"><a href="#">Event 4</a></li>
<li time="3:30PM"><a href="#">Event 5</a></li>
<li time="4:30PM"><a href="#">Event 6</a></li>
</ul>
</div>
</div>
<script>
$(document).on("pageinit", "#ScheduleDay", function(){
$("#ScheduleList").listview({
autodividers: true,
autodividersSelector: function (li) {
var out = li.attr('time');
return out;
}
}).listview('refresh');
});
</script>
Вот код в JSFiddle:http://jsfiddle.net/4fGT6/65/
Я знаю, что я мог бы изменить порядок элементов списка в html, и это исключило бы дублирование авторазделителей, но если бы я сделал список динамически генерируемым из пользовательского ввода, то я не смог бы вручную изменить порядок html.
Есть ли способ решить эту проблему, если список был создан динамически?
Благодарю.