0

我正在开发一个单页应用程序，我插入了一个闪屏，几秒钟后就消失了。但是，当下一页加载时，我在处理select和ìnput范围时遇到了问题。我想我可以强制他们初始化......但我觉得这不是一个好习惯......这是使用 $(document).ready 或 $(document).on 或类似的东西的问题（我是jquery 的菜鸟）。你能帮忙吗？

这是html：index.html

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="css/jquery.mobile-1.3.0.css" type="text/css" media="all" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
        <script src="js/jquery-1.9.1.js"></script>
        <script src="js/jquery.mobile.config.js"></script>
        <script src="js/jquery.mobile-1.3.0.js"></script>
        <script src="js/jquery-geturlvar.js"></script>
        <script src="js/boardDims.js"></script>
        <script src="js/functions.js"></script>
        <script src="cordova.js"></script>
        <script>
        $(document).one('deviceready', initApplication);
        </script>
    </head>
<body>

    <!-- SPLASH PAGE -->
    <div id="splash-page" data-role="page">
        <header data-role="header">
            <h1>LOUIZ</h1>
            <h1>get the board you deserve</h1>
        </header>
    </div>


    <!-- INDEX PAGE --> 
    <div id="welcome-page" data-role="page">
        <header data-role="header">
            <h1>my App</h1>
        </header>
        <div id="content" data-role="content">      
            <div id="resetbuttondiv">
                <button type="button" id="resetbutton" data-inline="true" data-mini="true">Reset fields
                </button>
            </div>      
            <form name="userdata" method="get">
                <select id="chosenpro">
                </select>
                <select id = "chosenbrand">
                </select>
                <select id = "userchosenpromodel">
                </select>
                <div id="weightdata" class=ui-grid-b>
                    <div class=ui-block-b>
                        <input type="number" name="userweight" value="76" required placeholder="Enter your precise current weight">
                    </div>
                    <div class=ui-block-c>
                        <select id="weightunit">
                          <option value = "kg">kg</option>
                          <option value = "lbs">lbs</option>
                        </select>
                    </div>
                </div>

            <p>
                <input id="levelrange" type="range" min="0" max="10" value="8" name="userlevelofsurfing" />
                <div id="leveldisplay"><strong>Very good:</strong> </div>
            </p>

            <button id="submitbutton">Get it</button>
        </form>
        </div>
     </div>
<!-- RESULT PAGE -->
    <div id="result-page" data-role="page">     
     </div>
<!-- EXPLANATION PAGE -->
    <div id="explanation-page" data-role="page">
     </div>
   </body>
</html>

这是js：boarDim.js

$(document).ready(function() {

//MAKE THE SPLASH DISAPPEAR
$(function() {
  setTimeout(function(){
       $.mobile.changePage("#welcome-page", "fade");
    }, 1000);
});

//global declarations   
var userLength;
var userWidth ;
var userThick ;
var userVolume;
var prodata=[];

var request = $.get("proDB.txt", function(data) {
    var lines=data.split(/\n/);
    var i;
    prodata.push(0);
    var fieldnames=lines[0].split(/\t/);
    for (i = 1; i < lines.length-1; ++i) {
        var fields=lines[i].split(/\t/);
        prodata.push(i);            
        var j;
        prodata[i]={};
        prodata[i]['id']=i; //auto id, there is no more 'id' column in the DB file.
        for (j = 0; j < fields.length; ++j) {
            var str=fieldnames[j];
            prodata[i][str]=fields[j];  
        }
    }
    //SORT BY NAME
    prodata.sort(SortByName);

    //VERSION 3 BOUTONS
    resetLists(prodata);

    //RESORT BY ID (to make it usable later)
    prodata.sort(SortById);

}, 'text');

if ($("#weightunit").is(":disabled")) {
        $('#weightunit').selectmenu('enable');
}

//LISTEN TO RESET BUTTON
$("#resetbutton").click(function(){resetLists(prodata);});

//INITIALISATIONS
$("#chosenpro").selectmenu(); // Initializes
$("#chosenbrand").selectmenu(); // Initializes
$("#userchosenpromodel").selectmenu(); // Initializes
$("#weightunit").selectmenu(); // Initializes


//LISTEN TO PRO CHOICE
$("#chosenpro").change(function(){
    var proId = $(this).find(":selected").val();
    var brandId = $('#chosenbrand').find(":selected").val();
    var optionsbrand = '';
    var dummy='';
    var usebrandId;
    //LIST ALL BRANDS
    for (i = 1; i < prodata.length; ++i) {
        if (prodata[i]['name'] == prodata[proId]['name']) {
            if (prodata[i]['brand'] != dummy ) {
                optionsbrand   += '<option value="' + prodata[i]['id'] + '">' + prodata[i]['brand'] +'</option>';
                if (prodata[i]['brand']==prodata[brandId]['brand']) {
                    usebrandId=1;
                }else{
                    usebrandId=0;
                }
            }
            dummy=prodata[i]['brand'];
        }
    }
    $("#chosenbrand").html(optionsbrand);
    $('#chosenbrand').selectmenu("refresh", true);
    var selectedBrandID;
    if (usebrandId==1) {
        selectedBrandID=brandId;
    }else{
        selectedBrandID=$('#chosenbrand').find(":selected").val();
    }
    //ENABLE MODELS BUTTON      
    if ($("#userchosenpromodel").is(":disabled")) {
            $('#userchosenpromodel').selectmenu('enable');
    }
    //LIST MODELS 
    var optionsmodel = '';
    for (i = 1; i < prodata.length; ++i) {
        if (prodata[i]['name'] == prodata[proId]['name'] && prodata[i]['brand'] == prodata[selectedBrandID]['brand'] ) {
                optionsmodel  += '<option value="' + prodata[i]['id'] + '">' + prodata[i]['model'] +'</option>';
        }
    }
    $("#userchosenpromodel").html(optionsmodel);
    $('#userchosenpromodel').selectmenu("refresh", true);
});


//LISTEN TO BRAND CHOICE
$("#chosenbrand").change(function(){
    //LIST CORRESPONGING PROS 
    var brandid = $(this).find(":selected").val();
    var previouslySelectedPro = $('#chosenpro').find(":selected").val();
    //console.log("chosen brand "+prodata[brandid]['brand']);
    var optionspro = '';
    var optionsmodel = '';
    var alreadyusedpros=[];
    for (i = 1; i < prodata.length; ++i) {
        if (prodata[i]['brand'] == prodata[brandid]['brand']) {
            if (jQuery.inArray(prodata[i]['name'], alreadyusedpros) == -1 ) {
                optionspro   += '<option value="' + prodata[i]['id'] + '">' + prodata[i]['name'] +'</option>';
                alreadyusedpros.push(prodata[i]['name']);
            }
        }
    }
    $("#chosenpro").html(optionspro);
    $('#chosenpro').selectmenu("refresh", true);

    //If previously selected pro has this brand, then reselect it
    var targetId=$('#chosenpro').find('option:contains('+ prodata[previouslySelectedPro]['name'] +')').val(); //get the option that corresponds to the previouslySelectedPro
    if (typeof targetId != 'undefined') {
        $('#chosenpro option[value="' + targetId + '"]').attr("selected", "selected");
    }

    //$("#chosenpro").html(optionspro);
    $('#chosenpro').selectmenu("refresh", true);
    //ENABLE MODELS BUTTON      
    if ($("#userchosenpromodel").is(":disabled")) {
        $('#userchosenpromodel').selectmenu('enable');
    }
    $('#userchosenpromodel').selectmenu("refresh", true);

    //GET MODELS CORRESPONDING TO CHOSEN PRO BY TRIGGERING PRO BUTTON LISTENER
    $('#chosenpro option:first').attr("selected", "selected"); //ça ne marche pas quand un pro est déjà selectionné par ligne 129 ce qui est tant mieux.
    $('#chosenpro').selectmenu("refresh", true);
    $('#chosenpro').trigger('change');
    $('#userchosenpromodel').selectmenu("refresh", true);

    //REMETTRE TOUTES LES MARQUES S'IL CHANGE DE CHOIX
    var optionsbrand = '';
    var alreadyusedbrands=[];
    for (i = 1; i < prodata.length; ++i) {
        if (jQuery.inArray(prodata[i]['brand'], alreadyusedbrands) == -1 ) {
            optionsbrand += '<option value="' + prodata[i]['id'] + '">' + prodata[i]['brand']+'</option>';
            alreadyusedbrands.push(prodata[i]['brand']);
        }
    }
    $("#chosenbrand").html(optionsbrand);
    //RESELECT THE ONE THAT'S BEEN SELECTED
    $('#chosenbrand').find('option:contains('+ prodata[brandid]['brand'] +')').attr("selected", "selected");
    $('#chosenbrand').selectmenu("refresh", true);
});

//LISTEN TO LEVEL OF SURFING
$("#levelrange").on("slidestop",function () {                    
    var newValue = parseInt($('#levelrange').val());
    var textsupp;
    var disclaimerString = '<span id="rouge">Sorry, not accounted by the app...yet</span>';
    switch (newValue) {
        case 0: textsupp ='<strong>Total noob:</strong>  <br>'+disclaimerString;
        break;
        case 1: textsupp ='<strong>Noob:</strong>  off<br>'+disclaimerString;
        break;
    }

    $("#leveldisplay").html(textsupp);
});

/////////////
//SUBMIT FORM
$('#submitbutton').click(function(e) {
    e.preventDefault(); 
    request.done(function(){
        proId=$('#userchosenpromodel option:selected').val();
        proId=parseInt(proId);
        var userLevel = parseInt($('#levelrange').val());

        computeUserDimensions(prodata[proId], userLevel);
        //MOVE TO RESULT PAGE
        $.mobile.changePage($('#result-page'));
    });
});

}); //$(document).ready
4

1 回答 1

1

当您说初始化时，您的意思是增强动态添加的内容吗？

如果是这样，他们有几种解决方案，但据我所知，您正在添加很多解决方案。而不是逐个小部件初始化它们中的每一个，而是将它们全部初始化的更好的解决方案：

$('#pageContent').trigger('create');

此功能将增强您所有动态添加的内容。如果您还向页脚和页眉添加了新内容，请使用以下内容：

$('#pageID').trigger('pagecreate');

最后，如果您想了解更多信息，请查看我关于该主题的其他答案，通常我不会在这里链接它，但您会在那里找到工作示例：jQuery Mobile：动态添加内容的标记增强

于 2013-05-22T18:45:30.993 回答