生成动态可点击列表项

Posted 2023-05-09

【中文标题】生成动态可点击列表项

【英文标题】：Generating dynamic clickable list items

【发布时间】：2014-08-20 17:53:06

【问题描述】：

我是 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": "[e-mail]",
            "address": "xx-xx-xxxx,x - street, x - country",
            "gender" : "male",
            "phone": 
                "mobile": "[phone]",
                "home": "00 000000",
                "office": "00 000000"
            
    ,
    
            "id": "c201",
            "name": "Johnny Depp",
            "email": "[e-mail]",
            "address": "xx-xx-xxxx,x - street, x - country",
            "gender" : "male",
            "phone": 
                "mobile": "[phone]",
                "home": "00 000000",
                "office": "00 000000"
            
    ,
    .
    .
    .
    .
]

【问题讨论】：

因为您正在导航到同一页面。您应该为每个动态页面动态创建一个唯一的id。 $.mobile.changePage('#secondpage');

【参考方案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.
    );

【讨论】：

当我在循环中添加代码并单击列表项时，列表项正在添加

您需要将newPage.appendTo($.mobile.pageContainer); 保持在循环之外。在循环中将所有项目添加到列表 div 中，然后在循环外，将新的动态生成的 div 添加到 pageContainer。 @user3744502

相同的结果（页面加载时添加列表项）。您可以在 jsfiddle 中发布修改后的代码吗？

@user3744502 发布您当前的代码。我会尝试更新。

【参考方案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');

                                          );
   

【讨论】：

当我在循环中添加代码并单击列表项时，列表项正在添加