CODEWITHSUNDEEP
javascripthtmljquery-mobile
Benjamin Anderson
Benjamin Anderson

Reputation: 367

Binding dynamically added elements in jQuery mobile

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

Upvotes: 1

Views: 283

Answers (1)

Omar
Omar

Reputation: 31732

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

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

Upvotes: 1

Related Questions