Comment puis-je ajouter un événement click pour li élément listview dans Phonegap JQM?

Je vais avoir des problèmes pour l'ajout d'un événement de clic pour un rempli dynamiquement listview à l'aide de JQM et Phonegap (Une liste statique fonctionne correctement). La liste se remplit et s'applique css correctement, mais lorsque j'essaie d'ajouter un événement de clic à l'aide de la $("#test li".on("click") l'id n'est pas sélectionné et que le code ne s'exécute. Des idées?

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

OriginalL'auteur andy2013 | 2013-07-27

  1. 7

    La façon correcte

    Quelques erreurs dans ton code :

    • Vous devez utiliser le pageinit cas de albumspage pour le rendu de la liste, et non pas à l'aide de la deviceReady événement.
    • Vous devez utiliser refresh une SEULE fois, après tout est fait en ajoutant.
    • Vous ajoutez votre li à l'intérieur de $("#test"). Mais quand vous êtes à la sélection de l'élément pour l'événement click, vous utilisez $("#test ul li"). Ce qui peut signifier deux choses : soit la façon appending est fait est mal ou du sélecteur pour click fonction est mal. À partir de l'HTML c'est clair que vous avez un mauvais sélecteur de click.

    Donc, finalement, votre code doit ressembler à ceci : 

    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

    Mais si voulez continuer à utiliser onDeviceReady cas, alors vous pourriez souhaitez modifier votre click événement : 

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

    Cette liaison à document veillera à ce que le déclic aura toujours du feu.

    merci! J'ai réussi à le faire fonctionner à l'aide de la méthode alternative. La première réponse ne fonctionne pas pour moi, mais encore à essayer d'obtenir mon headaround comment ces pageinit des événements il semble que la meilleure solution à long terme. merci.
    un plaisir de vous aider 🙂

    OriginalL'auteur krishgopinath

  2. 1

    Essayer ce code

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

    OriginalL'auteur Divesh Salian