生成动态点击列表中的项目项目、动态、列表中
2023-09-10 17:08:21
作者：别拿无知当个性～
我是新来的jQuery Mobile的。我想生成动态点击列表中的项目，在列表项的名称从阿贾克斯来到作为response.I我收到的电子邮件中的拉维玉田在secondpage，为每个列表项。为什么电子邮件ID是不会改变的每个列表项？有没有在我的code任何错误？
我的脚本：
//当DOM加载我们重视点击事件按钮
$（文件）。在（pageinit，＃作者列表页功能（）{
//启动Ajax请求
$阿贾克斯（{
网址：myURL / contacts.json
数据类型：JSON，
成功：功能（数据）{
VAR的listItem =;
对于（VAR I = 0; I＆LT; data.contacts.length;我++）{
的listItem + ='＆LT;李＆GT;＆LT; A HREF =＃＆GT; + data.contacts [I]。名称+'＆所述; / a取代;＆所述; /利＆GT;';
}
$（＃dynamicFieldList）。追加（的listItem）.promise（）。完成（功能（）{
//刷新列表在这里
$（本）.listview（刷新）;
//然后使用委派添加单击事件
$（本）。在（点击，礼，函数（）{
VAR currentItem = $（本）.index（）;
警报（currentItem）;
VAR NEWPAGE = $（＆LT; DIV数据角色=页面ID =secondpage'＆GT;＆LT; DIV数据 - 角色=头＆GT;＆LT;一个数据iconpos ='左'的数据，图标='回'的href ='＃'数据角色=按钮 data-rel='back'>Back</a><h1>"+data.contacts[currentItem].name+"</h1></div><div数据角色=内容＆GT;电子邮件：+ data.contacts [currentItem] .email +＆LT; / DIV＆GT;＆LT; / DIV＆gt;中）;
//追加新的页面到pageContainer
newPage.appendTo（$ mobile.pageContainer）;
//通过ID'#page移动到本网页
$ .mobile.changePage（'＃secondpage'）;
}）;
}）;
}
}）;
}）;
contacts.json：
{
人脉：
{
ID：C200，
名：拉维玉田，
电子邮件：ravi@gmail.com
地址：XX-XX-XXXX，X - 街道，X - 国家，
性别男，
电话： {
手机：+91 0000000000，
家：00 000000，
写字楼：00 000000
}
}，
{
ID：C201，
名：约翰尼·德普
电子邮件：johnny_depp@gmail.com
地址：XX-XX-XXXX，X - 街道，X - 国家，
性别男，
电话： {
手机：+91 0000000000，
家：00 000000，
写字楼：00 000000
}
}，
。
。
。
。
]}
解决方案 
使用低于code，侧循环加追加code。
的（VAR I = 0; I＆LT; data.contacts.length;我++）{
的listItem + ='＆LT;李＆GT;＆LT; A HREF =＃＆GT; + data.contacts [I]。名称+'＆所述; / a取代;＆所述; /利＆GT;';
$（＃dynamicFieldList）。追加（的listItem）.promise（）。完成（功能（）{
//刷新列表在这里
$（本）.listview（刷新）;
//然后使用委派添加单击事件
$（本）。在（点击，礼，函数（）{
VAR currentItem = $（本）.index（）;
警报（currentItem）;
VAR NEWPAGE = $（＆LT; DIV数据角色=页面ID =secondpage'＆GT;＆LT; DIV数据 - 角色=头＆GT;＆LT;一个数据iconpos ='左'的数据，图标='回'的href ='＃'数据角色=按钮 data-rel='back'>Back</a><h1>"+data.contacts[currentItem].name+"</h1></div><div数据角色=内容＆GT;电子邮件：+ data.contacts [currentItem] .email +＆LT; / DIV＆GT;＆LT; / DIV＆gt;中）;
//追加新的页面到pageContainer
newPage.appendTo（$ mobile.pageContainer）;
//通过ID'#page移动到本网页
$ .mobile.changePage（'＃secondpage'）;
}）;
}
I am new to 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. Why email id is not changing for each list item? 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": [
{
"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"
}
},
.
.
.
.
]}
解决方案
Use below code, added append code in side for loop.
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');
});
}
相关推荐
猜您喜欢
精彩图集
