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?

$(document).on("click", ".delbtn", function () instead of $('.delbtn').click(function() { when you deal with dynamic elements. This is called event delegation jsfiddle.net/Palestinian/z36fy/2 — Omar
– Omar, Commented Feb 19, 2014 at 18:00
possible duplicate of Binding dynamically added elements in jQuery mobile — Omar
– Omar, Commented Feb 19, 2014 at 18:04

ezanker · Accepted Answer · 2014-02-19 18:08:10Z

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

answered Feb 19, 2014 at 18:08

ezanker

24.7k1 gold badge22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

split listview secondary button click event on dynamically added rows

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related