Question

When I add content to my listview in jQuery Mobile, they don’t trigger the click event when clicked. In my example below, ‘Cadillac’ is not clickable. Am I doing something wrong?

HTML:

<div data-role="page" id="p1">
    <ul data-role="listview" data-theme="b">
        <li><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
    </ul>
</div> 

jQuery:

$('li').on('click',function(){
    alert('clicked');            
});

$('ul').append('<li><a href="#">Cadillac</a></li>');
$('ul').listview('refresh');

jsFiddle of the issue

Answer 1

Try to change your code to this

$('ul').on('click', 'li', function(){   # <-- That's the trick
    alert('clicked');            
});

$('ul').append('<li><a href="#">Cadillac</a></li>');
$('ul').listview('refresh');

EDIT: In this case on function automagically binds click to every li element in list even when DOM changes. So you can add list items whenever you want. All of them will have click event binding.

Using old live jQuery method with almost same functionality is a bad idea cause of it very sloooow performance.