生成动态可点击列表项

Question

我是 jquery mobile 的新手。我正在尝试生成动态可点击列表项，其中列表项是来自 ajax 作为响应的名称。我在第二页中收到 Ravi Tamada 的电子邮件，每个列表项。为什么每个列表项的电子邮件 ID 都没有改变？我的代码有什么问题吗？

我的脚本：

//When DOM loaded we attach click event to button
    $(document).on("pageinit","#authors-list-page",function() {

            //start ajax request
                 $.ajax({
                        url: “myURL/contacts.json",

                        dataType: "json",
                        success: function(data) {

                        var listItem = "";
                        for(var i=0;i<data.contacts.length;i++){ 
                              listItem += '<li><a href="#">' + data.contacts[i].name + '</a></li>'; 
                         }

                         $("#dynamicFieldList").append(listItem).promise().done(function () {
                              //refresh list here
                              $(this).listview("refresh");
                              //then add click event using delegation
                              $(this).on("click", "li", function () {

                               var currentItem = $(this).index();
                               alert(currentItem);

                               var newPage = $("<div data-role='page' id='secondpage'><div data-    role=header><a data-iconpos='left'  data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>"+data.contacts[currentItem].name+"</h1></div><div data-role=content>Email: "+ data.contacts[currentItem].email+"</div></div>");

                                // Append the new page into pageContainer
                                newPage.appendTo($.mobile.pageContainer);

                                // Move to this page by ID '#page'
                                $.mobile.changePage('#secondpage');

                                          });
                                 });

                           }
                   });

          });

contacts.json ：

    {
"contacts": [
    {
            "id": "c200",
            "name": "Ravi Tamada",
            "email": "ravi@gmail.com",
            "address": "xx-xx-xxxx,x - street, x - country",
            "gender" : "male",
            "phone": {
                "mobile": "+91 0000000000",
                "home": "00 000000",
                "office": "00 000000"
            }
    },
    {
            "id": "c201",
            "name": "Johnny Depp",
            "email": "johnny_depp@gmail.com",
            "address": "xx-xx-xxxx,x - street, x - country",
            "gender" : "male",
            "phone": {
                "mobile": "+91 0000000000",
                "home": "00 000000",
                "office": "00 000000"
            }
    },
    .
    .
    .
    .
]}

Answer 1

您正在迭代整个响应，然后设置列表项。

使用这个：

for(var i=0;i<data.contacts.length;i++){ 
    listItem += '<li><a href="#">' + data.contacts[i].name + '</a></li>'; 
    $("#dynamicFieldList").append(listItem).promise().done(function () {                 
        //Your code of function.
    });
}

Answer 2

使用下面的代码，在 for 循环中添加附加代码。

                     for(var i=0;i<data.contacts.length;i++){ 
                              listItem += '<li><a href="#">' + data.contacts[i].name + '</a></li>'; 

                         $("#dynamicFieldList").append(listItem).promise().done(function () {
                              //refresh list here
                              $(this).listview("refresh");
                              //then add click event using delegation
                              $(this).on("click", "li", function () {

                               var currentItem = $(this).index();
                               alert(currentItem);

                               var newPage = $("<div data-role='page' id='secondpage'><div data-    role=header><a data-iconpos='left'  data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>"+data.contacts[currentItem].name+"</h1></div><div data-role=content>Email: "+ data.contacts[currentItem].email+"</div></div>");

                                // Append the new page into pageContainer
                                newPage.appendTo($.mobile.pageContainer);

                                // Move to this page by ID '#page'
                                $.mobile.changePage('#secondpage');

                                          });
   }