Question

使用JQM和Phonegap（静态列表正常工作）将点击事件添加到动态填充的列表视图时遇到问题。 listview正确填充和应用css但是当我尝试使用$("#test li".on("click")添加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 -->

Answer 1

正确的方法

代码中的一些错误：

您必须使用pageinit albumspage事件来呈现列表视图，而不是使用deviceReady事件。
在完成所有操作后，您必须只使用refresh一次。
您正在将li追加到$("#test")内。但是当您为点击事件选择元素时，您正在使用$("#test ul li")。这可能意味着两件事：append完成的方式是错误的，或者click函数的选择器是错误的。从HTML中可以清楚地看到click中有错误的选择器。

所以最后你的代码必须如下所示：

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);
});

替代

但如果仍想使用onDeviceReady事件，那么您可能希望将click事件更改为：

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

这种与document的绑定将确保始终触发点击。

Answer 2

试试此代码

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

如何在Phonegap JQM中向li element listview添加click事件？

2 个答案:

正确的方法

替代