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按鈕不可見

回答

相關問題