How can I add a click event to li element listview in Phonegap JQM?

Question

I'm having problems adding a click event to a dynamically populated listview using JQM and Phonegap (A static list works correctly). The listview populates and applies css correctly but when I try to add a click event using the $("#test li".on("click") the id is not selected and no code executes. Any ideas?

JS :

    document.addEventListener("deviceready", onDeviceReady, false);

   function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, fail);
   }

   function onFileSystemSuccess(fileSystem) {
        fileSystem.root.getDirectory("external_sd/Music", {
            create: false,
            exclusive: false
        }, getDirSuccess, fail);
    }

    function getDirSuccess(dirEntry) {
        // Get a directory reader
        var directoryReader = dirEntry.createReader();
        // Get a list of all the entries in the directory
        directoryReader.readEntries(readerSuccess, fail);
    }

    function readerSuccess(entries) {
        for (i = 0; i < entries.length; i++) {
            $("#test").append("<li>" + entries[i].name + "</li>");
            $("#test").listview("refresh");
        }
    }

    $("#test ul li").on("click", function (event) {
        alert($(this).text());
    }); //this code doesn't execute.

    function fail(evt) {
        console.log(evt.target.error.code);
        alert("some error occured");
    }

HTML

    <div data-role="page" id="albumspage">

    <div data-role="header" data-position="fixed">
        <h1>MyApp</h1>      

    </div><!-- /header -->

    <div data-role="content">    
       <ul id="test" data-role="listview" data-autodividers="true">                 
       </ul>   
    </div>

    <div data-role="footer" data-position="fixed">
      <h1>footer</h1>
    </div><!-- /footer -->

 </div><!-- /page -->

Solution 1

The correct way

Some mistakes in your code :

• You must use the pageinit event of albumspage to render the listview, not using the deviceReady event.
• You must use refresh ONLY once, after everything is done appending.
• You are appending your li inside $("#test"). But when you're selecting the element for click event, you are using $("#test ul li"). That can mean two things : either the way appending is done is wrong or your selector for click function is wrong. From the HTML its clear that you have the wrong selector in click.

So finally your code must look like this :

function readerSuccess(entries) {
    var li = "";
    for (i = 0; i < entries.length; i++) {
        li += "<li>" + entries[i].name + "</li>";
    }
    $("#test").append(li).promise().done(function () {
        //refresh list here 
        $(this).listview("refresh");
        //then add click event using delegation
        $(this).on("click", "li", function () {
            alert($(this).text());
        });
    });
}

$(document).on("pageinit", "#albumspage", function () {
    //get entries from DB
    readerSuccess(entries);
});

Alternative

But if still want to use onDeviceReady event, then you might want to change your click event to this :

$(document).on("click", "#test li" ,function (event) {
    alert($(this).text());
}); 

This binding to document will ensure that the click will always fire.

Solution 2

Try this code

$("#test").on('click', 'li', function (e) {
 var control = $(this);
}

Comments

[andy2013]

thanks! I managed to get it working using the alternative method. The first response doesn't work for me, but still trying to get my headaround how these pageinit events work as it looks the better solution in the long run. thanks.

[krishwader]

@andy2013 glad to help :)