jquery mobile dynamic ul forever formating issue

Question

I know this is an old and boring issue, but i just can´t seem to get it right, i have seen lots of answers telling to refresh, create, enchance etc this is what i have:

my ul in the html file:

<ul id="listaNoticias" data-role="listview" data-split-icon="info" data-split-theme="a" data-inset="true">

my js file:

items=''; 
    $.ajax({
        url: '../data/noticias.php',
        dataType: 'json',
        success: function(data, status)
        {
            $.each(data, function(index,item)
            { 
                //$('#listaNoticias').append('<li><a href="#"><h2>'+item.titulo+'</h2>'+ '<p>'+item.texto+'</p></a></li>').listview('refresh');
                items += '<li><a href="#"><h2>'+item.titulo+'</h2>'+ '<p>'+item.texto+'</p></a></li>';
            });

            $('#listaNoticias').html(items);
            $('#listaNoticias').listview('refresh');
        },
        error: function(){
            output.text('There was an error loading the data.');
        }
    });

If i did a static ul, i would have a listview cell ending like below:

but when adding content dynamically, i have a simple cell like this, which is not what i want:

again i know this is an old issue, but i just can´t seem to figure it out

Answer 1

You forgot to add the second anchor tag in the dynamic listitems:

$.each(data, function(index,item)
{ 
   items += '<li><a href="#"><h2>'+item.titulo+'</h2>'+ '<p>'+item.texto+'</p></a><a href="#"</a></li>';
});

DEMO