split listview secondary button click event on dynamically added rows

Question

I'm adding rows to a split listview with jQm, and I can only get the first row (not dynamically added) to trigger a click event. I assume there's a refresh function somewhere that I need to call, but I can't figure out what - I'm already refreshing the listview, which I expected to solve it...

Here's the fiddle: http://jsfiddle.net/z36fy/1/

and here's the code:

<ul data-role="listview" data-split-icon="minus" id="list">
    <li>
        <a href="#">Item Description</a>
        <a href="#" class="delbtn">remove</a>
    </li>
</ul>
<a href="#" id="addbtn" class="ui-btn">Add item</a>

JS:

var itemcount=1;

$('#addbtn').click(function() {
   var addstr = '<li><a href="#">Item Description '+itemcount+'</a><a href="#" id="delbtn-'+itemcount+'" class="delbtn">remove</a></li></ul>';
    $('#list').append(addstr);
    $('#list').listview();
    $('#list').listview('refresh');
    itemcount++;
});

$('#list a.ui-li-link-alt').on("click",function() {
   alert('delbtn clicked'); 
});

What am I missing?

Answer 1

Because you are dynamically adding DOM elements, you can't bind ahead of time. Instead use event delegation (https://learn.jquery.com/events/event-delegation/):

$('#list').on("click", ".delbtn", function() {
   alert('delbtn clicked'); 
});

This says bind the click event to any items with class delbtn within the list even if they don't exist yet.

Updated FIDDLE