Append a split button Listview using jQuery Mobile

Question

I have a little function that takes an input text and appends it to a listview, it also adds a "delete" button that when pressed it removes the element from the list. Please find a working example here http://jsfiddle.net/4h857/.

I have been trying do modify this delete function to save some space and to make it look "better" by appending lists with a split button (with the "delete" icon). Hoping to get something like in this fiddle I found while searching online http://jsfiddle.net/ffabreti/Q4SCt/1/.

Now I have not made any changes on my fiddle because regardless of what changes I make it would just mess the UI.

Here is the script on my fiddle:

$('#AddScript').click(function () {
if ($('#MedNameStren').val() != '') {
    var text = '<h2>' + $('#MedNameStren').val() + '</h2>' + '<button>Delete</button>';
    $('<li />', {
        html: text
    }).appendTo('ul.justList');
    $('button').button();
} else {
    alert('Please fill all fields....');
}
$('ul.ScriptList').listview('refresh')

});

$('ul').on('click', 'button', function (el) {
$(this).closest('li').remove();
});

I have tried changing <button>Delete</button> into <a href="#">gear</a> like in the other fiddle but this would not give me the expected results.

I believe I'm doing something very silly, but after hours of research I can't find a example or something that would give me an idea so I can get my head around it and solve it.

I would appreciate any suggestions, please bare with my ignorance as I'm still a jQuery/Mobile newbie.

Answer 1

First mistake, you forgot to add data-role="listview" to ul. Second mistake, you're calling enhancement .listview("refresh") on ul.ScriptList which doesn't exist.

The correct markup of a split button is as follows.

<li>
  <a href="#">
    <h2>Text goes here</h2>
    <a href="#"></a> <!-- split button -->
  </a>
</li>

You also need to refresh list-view after deleting an item to updated styles.

Demo