javascript - Binding dynamically added elements in jQuery mobile

Question

I'm trying to delete some list elements after dynamically adding them.

The idea is that you can update the list, and then after updating it you can click on a list item to delete it.

Html:

<p>Test</p>
<ul data-role="listview">
    <li>Acura</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Cadillac</li>
    <li>Ferrari</li>
</ul>
<br>
<input type="button" value="Update" id="button">

Javascript:

var new_list =
    '<ul data-role="listview">' +
    '<li class="delete">Dog</li>' +
    '<li class="delete">Cat</li>' +
    '</ul>';

$('#button').off('click').on('click', function () {
    $('ul').remove();
    $('p').after(new_list);
    $('ul').listview();
});

$('.delete').off('click').on('click', function () {
    $( this ).remove();
});

Jsfiddle Link

Answer 1

The correct way to bind events to dynamically added items is as follows.

$(document).on("event", ".selector", function () {
  $(this).remove();
  $('ul_selector').listview('refresh');
});