加载复选框之前点击移动页面jquery

Load checkboxes before click on the page jquery mobile

本文关键字：移动 jquery 复选框 加载      更新时间：2023-09-26

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

我的代码 

     $(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);
        }

您可以通过几种不同的方式来实现。

假设你有两个独立的页面#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. 在第二页页面创建事件:

    $(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/

相关文章：