CSS styling is being lost when lis are dynamically added to a ul

Question

I am attempting to dynamically add links to a page but my css styling is only being applied to the list items the first time the list is created after each reload.

Below is my html:

 <div data-role="page" data-theme="b" id="selectConfirmation">
      <div data-role="header" data-theme="b" >
        <a class="cancelSelectConfirmationBtn ui-btn-left" data-role="button" data-icon="arrow-l" data-iconpos="left"  data-theme="b">Back</a>
        <h1>
          Confirmation Events
        </h1>
      </div>
      <div data-role="content" style="font-size: 16px;">
      <ul id="eventList" data-role="listview" class="ui-listview"></ul>
      </div>      
      </div>

and here is the portion of my java script that is adding the links:

function createList(ceg){

var list = document.getElementById('eventList');

for(i=ceg.length-1,k=0; k<ceg.length; i--,k++){
 var check = ceg.charAt(i);

 if(check == 1){
  var events = configJSON.root.DynamicDef.Application.SB_Primary.add[k]["-Data"].split(";");
  var li = document.createElement('li');
      li.innerHTML = '<a> ' + events[1] + '</a>';
  li.setAttribute('class', 'selectConfirmation');
  li.setAttribute('confirmcode', '5');
  li.setAttribute('data-theme', 'c');
  list.appendChild(li);
 }
}
var $list = $(list);
if ($list.hasClass('ui-listview')) {//this listview has already been initialized so refresh it
    $list.listview('refresh');
} else {//this list needs to be initialized
    $list.trigger('create');
}

gotoConfirmation(); }

Does anyone know why the css styling is being dropped when i recreate the list?

Answer 1

Directly after your for loop you can add this code that will check to see if the listview has been initialized by the jQuery Mobile framework:

var $list = $(list);
if ($list.hasClass('ui-listview')) {//this listview has already been initialized so refresh it
    $list.listview('refresh');
} else {//this list needs to be initialized
    $list.trigger('create');
}

This requires you to remove the ui-listview class from your <ul> tag so you can use it as a flag as to whether or not the jQuery Mobile framework has initialized the listview .

Here is a demo: http://jsfiddle.net/PQ39n/15/

UPDATE

You stated in a comment that you get this error:

Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'"

You get this error because you are trying to refresh a list that has not yet been initialized. My code above will help fix this problem since it checks whether or not the listview has been initialized and runs the proper code based on the state of the listview .

This is a common problem for developers who are new to jQuery Mobile because there are so many different events to bind to ( pageshow , pagecreate , pageinit , etc.) and the listview widget may or may not be initialized yet at the time any of those events fire.

Answer 2

Mannually adding class name is not enough since jQuery Mobile creates enhanced markup for each list item. You need to refresh your list triggering corresponding event. Add this code after your for-loop:

$(list).listview('refresh');

See docs