Question

我有一个3页的应用程序。我们称他们为A，B和C。

我进行Ajax调用以构建页面并根据标志更改图标（假设为flag1）并根据flag2更改页面。所有3个页面上都会显示图标，其中包含不同的ID sel1，sel2和sel3。

除非我在会话中第一次将页面更改为页面A，B或C，否则它在大多数情况下都能正常工作。在这种情况下，图标不会切换。任何帮助表示赞赏。

以下是代码段

    $(document).ready(function(){ 
    $("#sendajax").click(function() {               
    $.ajax({ type: "POST", url: "servlet2",  datatype: "json", 
         success:  populatedata});              
        };
});

    Function populatedata(data){        
       if (data.flag1 == "A" ){
          buildpageA(data);
          $.mobile.changePage("#pageA", {transition:"fade"});   
          $("#pageA").trigger('refresh');                   
    } else if  (data.flag1 == "B" ){
          buildpageB(data);
          $.mobile.changePage("#pageB", {transition:"fade"});   
         $("#pageB").trigger('refresh');
    }else  if(data.flag1 == "C" ){
         buildpageC(data);
         $.mobile.changePage("#pageC", {transition:"fade"});    
         $("#pageC").trigger('refresh');
    }

    Function buildpageA(data){
      if  (data.flag2 != "")                     
    $('#sel1').attr('data-icon', 'info').find('.ui-icon').
              removeClass('ui-icon-info').addClass('ui-icon-error');                
      else
     $('#sel1').attr('data-icon', 'error').find('.ui-icon').
                addClass('ui-icon-info').removeClass('ui-icon-error');              
          $("#sel1").trigger('refresh');
          ……
            }
         }

      Function buildpageB(data){
           if  (data.flag2 != "")                    
        $('#sel2').attr('data-icon', 'info').find('.ui-icon').
                removeClass('ui-icon-info').addClass('ui-icon-error');      
           else
        $('#sel2').attr('data-icon', 'error').find('.ui-icon').
                addClass('ui-icon-info').removeClass('ui-icon-error');          
           $("#sel2").trigger('refresh');
         ……
         }

          Function buildpageC(data){
             ...... you get the point    .}

JSP：

     <body>
      <page data-role= page  id =”pageA”> 
        <a href="#" data-role="button"   id="sel1" data-icon="" ></a></page>

      <page data-role= page  id =”pageB”>
        <a href="#" data-role="button"   id="sel2" data-icon="" ></a> </page>

      <page data-role= page  id =”pageC”>
        <a href="#" data-role="button"   id="sel3" data-icon="" ></a></page>
     </body>

Answer 1

要更改图标，请使用.buttonMarkup。

$('#sel').buttonMarkup({ icon: 'error' });

注意：对于jQuery Mobile，请不要使用.ready()，坚持使用jQuery Mobile事件。 http://api.jquerymobile.com/category/events/

addclass，removeclass在最初在changepage上加载页面时不起作用

1 个答案: