为什么$(this).jqmData(“chefid”);是不确定的?
我正在创建动态列表。它将包含厨师列表及其ID,名称和项目。当我们点击任何列表时,它将根据 chefid 从数据库中获取厨师详细信息( chefPlaceOrder )。 chefid在每个列表中作为参数传递为 ,但我得到 $(this).jqmData(“chefid”);如未定义,为什么?
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
/* $(document).on("pagecreate", "#foodOption", function(){ */
$("#listOfFoodOptions").on("click", "li", function(){
var Id = $(this).jqmData("chefid");
$("#todaySpecial").text("Details for chef with ID = " + Id);
$(":mobile-pagecontainer").pagecontainer("change", "#chefPlaceOrder", {transition : "slide"});
});
$("#btnReg").on("click", function(){
var output = '';
$("#listOfFoodOptions").empty();
var uName = document.getElementById('userName').value;
var mailId = document.getElementById('eMail').value;
var mobNum = document.getElementById('mobNumber').value;
var distance=document.getElementById('distance_id').value;
$.ajax({
url:"http://192.168.1.11/foodybuddy/webservices/getBuddy.php",
type:"GET",
dataType:"json",
data:{type:"register",Foody_Name:uName, Email:mailId, Mob_Num:mobNum, Distance:distance},
//type: should be same in server code, otherwise code will not run
ContentType:"application/json",
success: function(response){
console.log(response)
$.each(response, function(index,value){
output+='<li data-chefid="'+value.Chef.id+'"><a href="#" style="text-decoration:none;"> <img alt="chef" src="http://lorempixel.com/20/20/food/1/" width="20px" height="20px" >Chef'+ value.Chef.Name +' is cooking'+ value.Chef.Item +'</a></li>';
});
$("#listOfFoodOptions").append(output).listview('refresh');
},
error: function(err){
alert(JSON.stringify(err));
}
})
});
/* }); */
});
</script>
chefPlaceOrde页面
<div data-role="page" id="chefPlaceOrder">
<div data-role="header">
<h1>Chef Details</h1>
</div>
<div data-role="main" class="ui-content">
<p id="todaySpecial"></p>
<a href="#foodOption" class="ui-btn">Back to list</a>
</div>
</div>
foodOption page
<div data-role="page" id="foodOption">
<div style="width: 100%; margin-top:21%; margin-left: 1%; color: black;">
<ul data-role="listview" id="listOfFoodOptions" data-inset="true">
<!-- Dynamic list will create here. -->
</ul>
</div>
</div>
答案 0 :(得分:0)
这是因为您没有添加代码中所需的script
文件。或者您甚至可能多次添加脚本文件,这可能导致conflicts
。我有把你的代码的一小部分变成了一个小提琴。试着检查出来。检查你需要的资源是否正确加载配对.. :)
检查是否已将jquery.mobile-1.2.0.min.js
文件与项目一起加载
小提琴here