jQuery Mobile Listview按钮不可见

我已经在HTML文件中直接硬编码了Div内的jQuery Mobile Button并且它正确显示。请在下面找到jQuery Mobile Listview按钮不可见

enter image description here

像但当我通过JavaScript修改它这两个按钮就消失了。不知道为什么。请在下面找到

enter image description here

图像这可能是因为jQuery Mobile的列表视图的动态删除某些款式的东西？

这是HTML

<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>

这是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();

有人能弄清楚为什么？提前感谢您的时间。

来源

2012-12-03 Jay Mayu

我刚刚尝试过您的示例，对我而言，使用Windows 7和Firefox每天都可以正常工作，请参阅here。您是否仅在特定配置中遇到问题？

enter image description here

<!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>

来源

2012-12-03 14:12:38 Taifun

jQuery Mobile Listview按钮不可见

回答

相关问题