Javascript jQuery Mobile Listview按钮不可见
我在HTML文件中直接硬编码了Div中的jQuery移动按钮,它正确显示了。请找到下面的图片 但当我通过JavaScript修改它时,这两个按钮就不见了。不知道为什么。请找到下面的图片 是不是因为jQuery Mobile Listview动态删除了一些样式 这是HTMLJavascript jQuery Mobile Listview按钮不可见,javascript,jquery,listview,jquery-mobile,Javascript,Jquery,Listview,Jquery Mobile,我在HTML文件中直接硬编码了Div中的jQuery移动按钮,它正确显示了。请找到下面的图片 但当我通过JavaScript修改它时,这两个按钮就不见了。不知道为什么。请找到下面的图片 是不是因为jQuery Mobile Listview动态删除了一些样式 这是HTML <div data-role="content" data-theme="c"> <div id="ListOfCals"> <ul data-role="listview">
<div data-role="content" data-theme="c">
<div id="ListOfCals">
<ul data-role="listview">
<li data-icon='false'>
<div id='ColorCodeDiv' style='background-color:#FFF;'></div>
Calendar 2
<p style='margin-top:2px'><strong><font size='2' color='#006600'>Active</font></strong></p>
<div id='calendarListView'>
<a name='del' data-role='button' href='#' data-icon='delete' data-theme='g' data-iconpos='notext' data-inline='true' data-bttype='delete'></a>
<a name='del' data-role='button' href='#' data-icon='gear' data-theme='e' data-iconpos='notext' data-inline='true' data-bttype='edit'></a>
</div>
</li>
</ul>
</div>
-
日历2
活动
这是使用的JavaScript代码
var strCalList = "<ul data-role='listview'>";
var ListOfCals = JSON.parse(data.d);
$(ListOfCals).each(function(){
strCalList +="<li data-icon='false'>";
strCalList += "<div id='ColorCodeDiv' style='background-color:"+$.trim(this.ColorCode)+"'></div>"
strCalList += this.CalendarName;
if(this.Active==true){
strCalList +="<p style='margin-top:2px'><strong><font size='2' color='#006600'>Active</font></strong></p>" ;
}
else if(this.Active==false){
strCalList +="<p style='margin-top:2px'><strong><font size='2' color='#FF0000'>Inactive</font></strong></p>";
}
strCalList +="<div id='dvBtn'>";
strCalList += "<a name='del' data-role='button' href='#' data-icon='gear' data-theme='e' data-iconpos='notext' data-inline='true' data-bttype='edit' ></a>";
strCalList +="<a name='del' data-role='button' href='#' data-icon='delete' data-theme='g' data-iconpos='notext' data-inline='true' data-bttype='delete'></a>";
strCalList +="</div>";
strCalList +="</li>";
});
strCalList = strCalList+"</ul>";
$('#ListOfCals').html(strCalList);
$('#ListOfCals ul').listview();
var-strcalist=“”;
var ListOfCals=JSON.parse(data.d);
$(列表目录)。每个(函数(){
strCalist+=“”;
strCalist+=“”
strCalist+=this.CalendarName;
if(this.Active==true){
strcalist+=“处于活动状态
”;
}
else if(this.Active==false){
strcalist+=“非活动的
”;
}
strCalist+=“”;
strCalist+=“”;
strCalist+=“”;
strCalist+=“”;
strcalist+=“ ”;
});
strcalist=strcalist+“”;
$('#ListOfCals').html(strcalist);
$('ListOfCals ul').listview();
有人能找出原因吗??谢谢您提前给我时间。我刚刚尝试了您的示例,对于我来说,它每晚使用Windows 7和Firefox都可以正常工作,请参阅。您是否仅在特定配置中存在问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content" data-theme="c">
<div id="ListOfCals">
<ul data-role="listview">
<li data-icon='false'>
<div id='ColorCodeDiv' style='background-color:#FFF;'></div>
Calendar 2
<p style='margin-top:2px'><strong><font size='2' color='#006600'>Active</font></strong></p>
<div id='calendarListView'>
<a name='del' data-role='button' href='#' data-icon='delete' data-theme='g' data-iconpos='notext' data-inline='true' data-bttype='delete'></a>
<a name='del' data-role='button' href='#' data-icon='gear' data-theme='e' data-iconpos='notext' data-inline='true' data-bttype='edit'></a>
</div>
</li>
</ul>
</div>
<script>
$(document).on("mobileinit", function(){
var strCalList = "<ul data-role='listview'>";
var ListOfCals = JSON.parse(data.d);
$(ListOfCals).each(function(){
strCalList +="<li data-icon='false'>";
strCalList += "<div id='ColorCodeDiv' style='background-color:"+$.trim(this.ColorCode)+"'></div>"
strCalList += this.CalendarName;
if(this.Active==true){
strCalList +="<p style='margin-top:2px'><strong><font size='2' color='#006600'>Active</font></strong></p>" ;
}
else if(this.Active==false){
strCalList +="<p style='margin-top:2px'><strong><font size='2' color='#FF0000'>Inactive</font></strong></p>";
}
strCalList +="<div id='dvBtn'>";
strCalList += "<a name='del' data-role='button' href='#' data-icon='gear' data-theme='e' data-iconpos='notext' data-inline='true' data-bttype='edit' ></a>";
strCalList +="<a name='del' data-role='button' href='#' data-icon='delete' data-theme='g' data-iconpos='notext' data-inline='true' data-bttype='delete'></a>";
strCalList +="</div>";
strCalList +="</li>";
});
strCalList = strCalList+"</ul>";
$('#ListOfCals').html(strCalList);
$('#ListOfCals ul').listview();
});
</script>
</div>
</body>
</html>
测验
-
日历2
活动
$(文档).on(“mobileinit”,函数(){
var strcalist=“”;
var ListOfCals=JSON.parse(data.d);
$(列表目录)。每个(函数(){
strCalist+=“- ”;
strCalist+=“”
strCalist+=this.CalendarName;
if(this.Active==true){
strcalist+=“
处于活动状态
”;
}
else if(this.Active==false){
strcalist+=“非活动的
”;
}
strCalist+=“”;
strCalist+=“”;
strCalist+=“”;
strCalist+=“”;
strcalist+=“ ”;
});
strcalist=strcalist+“
”;
$('#ListOfCals').html(strcalist);
$('ListOfCals ul').listview();
});