jquery-mobile - Phonegap JQMのli要素リストビューにクリックイベントを追加するにはどうすればよいですか?

Question

JQM と Phonegap を使用して、動的に設定されたリストビューにクリック イベントを追加する際に問題が発生しています (静的リストは正しく機能します)。リストビューは css を正しく入力して適用しますが$("#test li".on("click")、ID を使用してクリック イベントを追加しようとすると、選択されず、コードが実行されません。何か案は？

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 -->