jQuery Mobile Listview 按钮不可见答案

【问题标题】：jQuery Mobile Listview Button not visiblejQuery Mobile Listview 按钮不可见
【发布时间】：2012-12-03 10:00:44
【问题描述】：

我在 HTML 文件中直接硬编码了 Div 中的 jQuery Mobile 按钮，它可以正确显示。请在下面找到图片

但是当我通过 JavaScript 修改它时，这两个按钮不见了。不知道为什么。请在下面找到图片

会不会是因为jQuery Mobile Listview动态移除了一些样式的东西？？

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

有人能找出原因吗？提前感谢您的时间。

【问题讨论】：

标签： javascript jquery listview jquery-mobile

【解决方案1】：

我刚刚尝试了您的示例，对我来说，使用 Windows 7 和 Firefox Nightly 可以正常工作，请参阅 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>

【讨论】：