在点击页面jquery mobile之前加载复选框

Question

我尝试在点击之前加载页面上的复选框。我有一个功能，创建复选框，并且工作得很好。我只想弄清楚如何在单击之前加载复选框。

这是我的代码

     $(document).on('pageshow', function() {    
        $.mobile.activePage.find("div [data-role=tabs] ul li:first-child a").click();

    });

   **//THIS IS THE PAGE I WANT THE CHECK BOX CREATED BEFORE LOADED**
     $('#fragment-2').on('pagebeforeload', function(){
        createCheckboxes()

     });

**//HERE IS HOW THE CHECK BOX ARE CREATED**
function createCheckboxes(){

        var players_names = playerCal("ars", 7, 5);
         $("#createBtn").remove();
         $(".content").append('<fieldset class="cbFieldSet" data-role="controlgroup">');
         var length = players_names[0].length;
         $(".cbFieldSet").append("<ul data-role='listview' data-inset='true' data-theme='d' data-divider-theme='e' data-count-theme='b'><li data-role='list-divider'><span>Select players in the next line up2</span></li></li>");
         for(var i=0;i<length;i++){
            $(".cbFieldSet").append('<li><input type="checkbox" name="cb-'+i+'" id="cb-'+i+'" value="'+players_names[0][i]+'"/><label for="cb-'+i+'">'+players_names[0][i]+'</label></li>');
         }

          $(".cbFieldSet").append("</ul>");

         $(".content").trigger("create");
         $("#showBtn").css("visibility","visible");
         console.log(players_names);
        }

Answer 1

你可以用几种不同的方式做到这一点。

假设您有两个单独的页面#index和#second。

1. 在页面处于活动状态之前执行此操作，当然，只有在使用多页面模板时，此解决方案才有效，其中每个页面都位于一个HTML文件中：

   $(document).on('pageshow', '#index', function(){ 
       createCheckboxes();
   });
   
   $(document).on('click', '#test', function(){ 
       alert('Automated Click');
   });
   
   $(document).on('pageshow', '#second', function(){     
       $.mobile.activePage.find("#test").trigger( "click" );
   });
   
   function createCheckboxes(){
       $('#second').find(".content").append('<fieldset class="cbFieldSet" data-role="controlgroup">');
       $(".cbFieldSet").append("<ul data-role='listview' data-inset='true' data-theme='d' data-divider-theme='e' data-count-theme='b'><li data-role='list-divider'><span>Select players in the next line up2</span></li></li>");
       for(var i=0;i<5;i++){
           $(".cbFieldSet").append('<li><input type="checkbox" name="cb-'+i+'" id="cb-'+i+'" value="Meh"/><label for="cb-'+i+'">BEh</label></li>');
       }
   
       $(".cbFieldSet").append("</ul>");
   
       $(".content").trigger("create");
       $("#showBtn").css("visibility","visible");
   }
   

   工作示例：http://jsfiddle.net/Gajotres/vds2U/52/

2. 在第二页pagecreate事件中执行此操作：

   $(document).on('pagecreate', '#second', function(){ 
       createCheckboxes();
   });
   
   $(document).on('click', '#test', function(){ 
       alert('Automated Click');
   });
   
   $(document).on('pageshow', '#second', function(){     
       $.mobile.activePage.find("#test").trigger( "click" );
   });
   
   function createCheckboxes(){
       $('#second').find(".content").append('<fieldset class="cbFieldSet" data-role="controlgroup">');
       $(".cbFieldSet").append("<ul data-role='listview' data-inset='true' data-theme='d' data-divider-theme='e' data-count-theme='b'><li data-role='list-divider'><span>Select players in the next line up2</span></li></li>");
       for(var i=0;i<5;i++){
           $(".cbFieldSet").append('<li><input type="checkbox" name="cb-'+i+'" id="cb-'+i+'" value="Meh"/><label for="cb-'+i+'">BEh</label></li>');
       }
   
       $(".cbFieldSet").append("</ul>");
   
       $(".content").trigger("create");
       $("#showBtn").css("visibility","visible");
   }
   

   工作示例：http://jsfiddle.net/Gajotres/vds2U/53/