[英]Generating dynamic clickable list items
I am new to jquery mobile. 我是jQuery Mobile的新手。 I am trying to generate dynamic clickable list items, where list items are names coming from ajax as response.I am getting Email of Ravi Tamada in secondpage,for each list item.
我正在尝试生成动态可点击的列表项,其中列表项是来自ajax的名称作为响应。我在每个页面的第二页中都收到Ravi Tamada的电子邮件。 Why email id is not changing for each list item?
为什么每个列表项的电子邮件ID都没有更改? Is there any wrong in my code?
我的代码有什么错误吗?
My script: 我的剧本:
//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.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"
}
},
.
.
.
.
]}
You are iterating in whole response and then setting list item. 您正在整个响应中进行迭代,然后设置列表项。
Use this: 用这个:
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.
});
}
Use below code, added append code in side for loop. 使用下面的代码,在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');
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.