Question

I am programmatically adding a li to a ul using JQuery and jQM
The following code works, it adds the li and a normal jQM looking button

$('#ul_edit_users')
   .append("<li>"+
      " <a href='#' data-role='button' data-theme='c'>Delete</a>"+
       "</li>");
$('#ul_edit_users').listview('refresh');

However when I add logic to split the LI into two rows, i lose the ‘button’ features and it just becomes a regular blue ‘href’.

$('#ul_edit_users')
.append("<li>"+
        "<div class='ui-grid-a'>"+
    " <div class='ui-block-a'>"+
    "  <h2 >Name</h2>"+
    " </div>"+
    " <div class='ui-block-b'>"+
    "  <a href='#' data-role='button' data-theme='c'>Delete</a>"+
    " </div>"+
    "</div>"+
    "</li>");
  $('#ul_edit_users').listview('refresh');

If I put that code into the file as regular html then it works fine, I think jquery isnt happy about adding it dynamically.

Any ideas very welcome, thanks.

Answer 1

You need to .trigger('create') on the new piece you are inserting to generate the buttons etc, then you .listview('refresh') to update the list.

$('#add').click(function() {
    $new = $("<li><div class='ui-grid-a'><div class='ui-block-a'><h2 >Name</h2></div><div class='ui-block-b'><a href='#' data-role='button' data-theme='c'>Delete</a></div></div></li>");

    $('#ul_edit_users').append($new);

    $new.trigger('create');

    $('#ul_edit_users').listview('refresh');
});
​

http://jsfiddle.net/trapper/TyEDz/1/