Fatal编程技术网
  • jquery/
  • 在jquerymobile中动态创建的rating star插件中未正确应用样式

在jquerymobile中动态创建的rating star插件中未正确应用样式

jquery css jquery-mobile

在jquerymobile中动态创建的rating star插件中未正确应用样式,jquery,css,jquery-mobile,Jquery,Css,Jquery Mobile,我使用的是jquery rating star插件，静态使用时一切正常，但当我动态创建listview并将“option”输入控件放入其中时，它从不应用样式 在中，我已加载样式表： <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" id="viewport" content="width=device-widt

我使用的是jquery rating star插件，静态使用时一切正常，但当我动态创建listview并将“option”输入控件放入其中时，它从不应用样式

在中，我已加载样式表：

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <meta name="viewport" id="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no"/> 
   <link rel="stylesheet" href="js/rating/jquery.rating.css" />
   <link rel="stylesheet" href="css/themes/etensr.theme.css" />
   <script src="jquery.1.7.1.min.js" type="text/javascript"></script>       
   <script type="text/javascript" src="js/rating/jquery.rating.js"></script> 
   <script type="text/javascript" src="jquery.mobile.1.0.min.js"></script>       
</head>
以及网页：

<div data-role="page" id="subcategories" data-theme="a">
    <div class="header" data-role="header" style="height: 42px;" >  
        <a data-rel="back" data-role="button" data-theme="c">Back</a>
        <a href="order.html" data-role="button" data-theme="c" data-icon="gear" data-iconpos="right" class="ui-btn-right">0.00 SRD - </a>                                 
    </div>        
    <div data-role="content" id="subcategoryCnt">
      <ul id="subcategoryList" data-role="listview" data-theme="a" data-dividertheme="c" >
        <li data-icon="arrow-r" > 
           <img src="images/thumb80x80.jpg" />
           <div>
              <div style="float:left;"><p>Product</p></div>
              <div style="float:right;font-size: 12px;">Price</div>    
              <div style="clear:both;"></div>
              <div style="float:left;">
                 <input name="star1" type="radio" data-role="none" class="star" disabled="disabled" />
                 <input name="star1" type="radio" data-role="none" class="star" disabled="disabled" />
                 <input name="star1" type="radio" data-role="none" class="star" disabled="disabled" checked="checked"/>
              </div>
           </div>           
        </li>    
      </ul>                    
    </div>
</div>



    

  • 
产品
    
价格

    •
所有这些都正确显示，但当我动态加载listview项目时，输入的收音机不会呈现为星形，而是普通的收音机按钮：

 <div data-role="page" id="subcategories" data-theme="a">
    <div class="header" data-role="header" style="height: 42px;" >  
        <a data-rel="back" data-role="button" data-theme="c">Back</a>
        <a href="order.html" data-role="button" data-theme="c" data-icon="gear" data-iconpos="right" class="ui-btn-right">0.00 SRD - </a>                                 
    </div>        
    <div data-role="content" id="subcategoryCnt">
        <script type="text/javascript">
           GetSubcategories(); 
        </script>                                    
    </div>
 </div>


GetSubcategories（）；
而JS是：

function GetSubcategories() {
   subcategories = result.GetSubcategoriesResult;
   if (subcategories.length > 0) {
      var html = '<ul id="subcategoryList" data-role="listview" data-theme="a" data-dividertheme="c" >';
      for (i = 0; i < subcategories.length; i++) {
          html = html + '<li data-role="list-divider">' + subcategories[i].Name + '</li>';
          prods = subcategories[i].Products;
          if (prods.length > 0) {
              for (j = 0; j < prods.length; j++) {
                  html = html +
                      '<li data-icon="arrow-r" >' +
                        '<a href="products.html"  rel="external">' +
                            '<img src="images/thumb80x80.jpg" />' +
                            '<div>' +
                               '<div style="float:left;"><p>' + prods[j].Name + '</p></div>' +
                               '<div style="float:right;font-size: 12px;">' + prods[j].Price + ' SRD</div>' +
                               '<div style="clear:both;"></div>' +
                               '<div style="float:left;">' +
                                    '<input name="star' + prods[j].Id + '" type="radio" data-role="none" class="star" disabled="disabled" />' +
                                    '<input name="star' + prods[j].Id + '" type="radio" data-role="none" class="star" disabled="disabled" />' +
                                    '<input name="star' + prods[j].Id + '" type="radio" data-role="none" class="star" disabled="disabled" checked="checked"/>' +
                               '</div>' +
                            '</div>' +
                        '</a>' +
                      '</li>';
              }
          }
      }
          html += '</ul>';
   }
   $('#subcategoryCnt').html(html);
   $('#subcategoryList').listview();    
}

函数GetSubcategories（）{
subcategories=result.GetSubcategoriesResult；
如果（subcategories.length>0）{
var html='
    ；
对于（i=0；i'+子类别[i]。Name+''；
产品=子类别[i]。产品；
如果（产品长度>0）{
对于（j=0；j”+
'' +
“”；
}
}
}
html+='
'；
}
$（'#subcategory cnt'）.html（html）；
$（“#子类别列表”）.listview（）；
}
当我做同样的事情，但动态一切都显示正确，除了输入收音机，这是不是显示像星星

我做错了什么？
谢谢

关于
data icon=“star”

另外，我认为您仍然需要刷新jQM

JS

那么
data icon=“star”

另外，我认为您仍然需要刷新jQM

JS

尝试使用实时查询，因为在执行$（选择器）.rating（），插件应用于DOM中存在的选择器定义的元素。当您动态添加它们时，您还需要动态地将插件应用于它们。这就是livequery可以帮助您的地方。做点像

$（选择器）.livequery（函数（）{
$（this）.rating（）；//或添加所需的选项
});

尝试使用实时查询，因为在执行$（选择器）.rating（），插件应用于DOM中存在的选择器定义的元素。当您动态添加它们时，您还需要动态地将插件应用于它们。这就是livequery可以帮助您的地方。做点像

$（选择器）.livequery（函数（）{
$（this）.rating（）；//或添加所需的选项
});

谢谢你，菲尔，但这并不能解决我的问题。我仍然不知道为什么在动态创建控件时，除了jquerymobile样式之外，没有应用样式。谢谢Phill，但它并没有解决我的问题。我仍然不知道为什么在动态创建控件时，除了jquerymobile样式之外，没有应用其他样式。 
$('#mylist').listview('refresh');