Jquery mobile Jquery Mobile val（）在changePage之后返回未定义

我有两个正在使用的页面：第一个页面是从php服务器获取值并填充选择/输入的页面，第二个页面是从第一个页面中的隐藏输入获取值的对话框。第一次转换将打开对话框并正确获取值。之后，我将值保存在php会话中并重新加载第一个页面。在此过程之后，当我再次打开对话框时，jquery无法获取val（），并显示undefined。我不确定这是否是由于重新加载页面问题或其他原因造成的。如果我刷新页面，那么它将再次正常工作

<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
          .....
    <div data-role="navbar" data-iconpos="top">
          .....
    </div>
    <div data-theme="c" id="cashtab" data-role="content">
        <div style="display:none" id="proddata" data=""></div>
        <div style="display:none" id="prodstock" data=""></div>
        <form id="mainsubmit" action="form.php" method="post" data-ajax="false">
            <input id="formproduct" type="hidden" name="product" value=""/>
            <div id="productsearch" style="width:48%; float:left; margin-right:2%;">
                <label for="search">Search Product:</label><br/><br/>
                <ul id="productautocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Select a product... (type at least 3 letters)" data-filter-theme="d"></ul>
            </div>
            <div id="packingselect" style=" width:23%; float:left; margin-right:2%;">
                 <label for="packing">Select Packing:</label>
                 <select name="packing" id="packing" data-iconpos="left">
                 </select>
            </div>
            <div id="qtyenter" style=" width:23%; float:left; margin-right:2%;">
                 <label for="quantity">Select Qty:</label>
                 <input type="number" data-clear-btn="true" name="quantity" id="qty" value=""/>
            </div><br/><br/><br/><br/><br/><br/><br/><br/>
            <div style="display:inline-block; width:33%; margin-left:33%; margin-right:33%;">
                 <a href="#page3" data-rel="dialog" data-role="button" >ADD</a>
            </div>
        </form>
    </div>
</div>

<div data-role="page" id="page3" data-url="dialog.html" data-close-btn="right">
    <div data-role="header">
        <h1>Batch Selection</h1>
    </div>
    <div data-role="content">
    <div style="overflow:auto;">
    <table id="batchsel" style="border:1px;">
        <thead>
        <tr>
            <th></th>
            <th>Batch No</th>
            <th>Exp Date</th>
            <th>Brate</th>
            <th>Srate</th>
            <th>Packing</th>
            <th>Stock</th>
            <th>Supplier</th>
            <th>ST%</th>
            <th>Bill Date</th>
            <th>Bill No</th>
            <th>btax</th>
        </tr>
        </thead>
              <!--data populated from server once the values from first page is read properly. 
              <!-- currently not loading the second time as unable to fetch val() -- >
        <tbody>
        </tbody>
    </table>
    </div>
    <div id="remainingdata">
        <p1 id="changeable_requirements"></p1>
        <!-- function the send the checked checkboxes relavent info to store in session --> 
        <button id="saveprod" onclick="addProduct(); return false;">Add Product</button>
    </div>
    </div>
</div>


<script>
$( document ).on( "pageinit", "#page1", function() {

//for product select autopopulate -- working //

$("#productautocomplete").live( "listviewbeforefilter", function ( e, data ) {
        var $ul = $( this ),$input = $( data.input ),value = $input.val(),html = "";
        $ul.html( "" );
        if ( value && value.length > 2 ) {
            $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
            $ul.listview( "refresh" );
        $.getJSON('ajax/getProductList.php', {term:$input.val()}, function(data) {
        var items = [];
        var str = "";
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                var value = data[key].value;
                var label = data[key].label;
                var stock = data[key].stock;
                var proddata = data[key].data;
                str += '<li code="'+value+'" name="'+label+'" stock="'+stock+'" data="'+proddata+'">';
                str += '<a data-ajax="false" rel="external">'+label+' [ '+stock+' ]</a>';
                str += '</li>';
            }
        }
        $ul.html( str );
                $ul.listview( "refresh" );
                $ul.trigger( "updatelayout" );
        });
        }
    });
    //end search

    //on click set hidden input fields to be used in dialog box. -- working

    $('#productautocomplete li').live('click', function(e) {
    //--------------------fetch data ------------------------
    var id = $(this).attr('code'); 
    var name = $(this).attr('name');
    var data = $(this).attr('data');
    var stock = $(this).attr('stock');
    //add packaging type and unit info to div data
    $('#proddata').attr('data',data);
    //add currstock info to div
    $('#prodstock').attr('data',stock);
    //----------------------hide list
    $('#productautocomplete li').hide();
    //----------------------place name in visible input box
    $('#productsearch input').attr('value',name);
    //----------------------place id in hidden input box for the actual form.
    $('#formproduct').val(id);
    //----------------------fill options for package + show select package div 
    var filteroptions = data.split(",");
    $('#packing option').remove();
    for (var x=0; x<3 ; x++) {
        var eachoption = filteroptions[x].split(":");
        //if unit wise option is less than that of stock show as option. 
        if (eachoption[0]!="0" && eachoption[0] <= stock.valueOf()) {
        $('#packing').append($('<option>', { 
            value: eachoption[0]+':'+eachoption[1],
            text : eachoption[1]+' [ '+eachoption[0]+' ] '
        }));
        }
    }
    });
});

//this is where the problem lies .. 
//have tried with pageinit.. but that only calls it once.
$( document ).on( "pageshow", "#page3", function() {
    $('#batchsel tbody').empty(); 

    // !!!!!!!!!!!!!!!!!!!!!!! // !!!!!!!!!!!!!!!!!!!!!!! //
    //doesnt fetch any of 4 following values after pageChange back to page1. 
    //not sure if this is due to how i'm reloading the page1. 
    //see function addProduct below.

    var prodcode = $('#formproduct').val(); // 
    var prodstock = $('#prodstock').attr('data');
    var prodqty = $('#qty').val();
    var packing = $('#packing').find(":selected").val();

    //returns undefined
    alert(prodcode); alert(packing); alert(prodqty); 

    //always ends here when dialog opens second time.
    if (!prodcode || !packing || !prodqty) {
       alert("Please give all required information");
       //does not close also when opens the second time.
       $('#page3').dialog('close');
    }

    var packinginfo = packing.split(":");
    var totalrequired = prodqty * packinginfo[0];
    //alert(packinginfo[1]);alert(totalrequired);
    if (totalrequired > prodstock ) {
    alert("Not enough Stock");
    $('#page3').dialog('close');
    } else {
    //------------------------------ Getting Batch Info ---------------------------------------------------
    var rows = '';
    $.getJSON('ajax/getBatchDetails.php', {code:prodcode,pack:packinginfo[1],qty:totalrequired}, function(data) {
        for (var key in data) {
        if (data.hasOwnProperty(key)) {
            //alert (data[key].Batch);
            rows += '<tr><td><input type="checkbox" class="batchcheckbox" id="batchcheckbox_'+data[key].BatchId+'" value="'+data[key].BatchId+':'+data[key].Stock+'" onchange="resetRemainingQty(this.value);""/></td><td>' + data[key].Batch + '</td><td>' + data[key].ExDt +'</td><td>' + data[key].BRate + '</td><td>' + data[key].SRate + '</td><td>' + data[key].Pack + '</td><td>' + data[key].Stock + '</td><td>' + data[key].Supname + '</td><td>' + data[key].Stax + '</td><td>' + data[key].BillDt + '</td><td>' + data[key].BillNo + '</td><td>' + data[key].btax + '</td><tr>';
        }
        }
        $('#batchsel tbody').append(rows);
        //add remaining amount in the data field of p1. 
        $('#remainingdata p1').attr('data',totalrequired);
        $('#remainingdata p2').attr('data',totalrequired);
        $('#remainingdata p1').html("<h4>Remaining Amount : "+totalrequired+"</h4>");
    });
    //---------------------------------------------end batch info display: -----------------------------------
    }
});

function addProduct() {
    //--------code info---------
    var prodcode = $("#formproduct").val(); // to send
    //--------packing info---------------
    var packing = $('#packing').find(":selected").val();
    var packinginfo = packing.split(":");
    //-----------qty req ---------------------
    var prodqty = $('#qty').val();
    var totalrequired = prodqty * packinginfo[0]; // to send
    //-------------batch info -----------
    var allbatchids = "";
    $('.batchcheckbox').each(function() {
    if($(this).is(':checked')){
        var data = $(this).val();
        var datasplit = data.split(":");
        var batchid = datasplit[0];
        allbatchids += batchid+":";
    }
    });
    allbatchids = allbatchids.substring(0, allbatchids.length - 1); // to send
    alert(prodcode+",,"+packinginfo[1]+",,"+totalrequired+",,"+allbatchids);
    //-------------- send to server to save to session ---------
    $.getJSON('ajax/saveProductSession.php', {code:prodcode,pack:packinginfo[1],qty:totalrequired,batch:allbatchids}, function(data) {
    if (data.error == "1") {
        alert(data.message);
    } else {

        /// !!!!!!!! !!!!!!!!!!!!!!! !!!!!!!!!!!!!!!
        /// 
        /// the loads the page1. but jquery doesnt take val() after this. 
        ///tried multiple variations of this but to no effect. 
        ///removed all options.. redirect to main.php.. reloadpage:false.. etc. 
        ///Any other way to reload the page so that the dialog once open again can 
        ///get the values from the page1 again. 

        $.mobile.changePage("#page1", {  reloadPage: true , dataUrl : "page1", reverse : true, changeHash: true } ); 


    } 
    });
//    
//    $.ajax({
//  type: "POST",
//  url: "ajax/saveProductSession.php",
//  data: { code:prodcode,pack:packinginfo[1],qty:totalrequired,batch:allbatchids }
//    }).done(function() {});
}
</script>

.....
.....
搜索产品：



选择包装：
选择数量：












批次选择
批号
出口日期
布瑞特
Srate
包装
股票
供应商
ST%
账单日期
账单号
btax
添加产品
$（document）.on（“pageinit”、“#page1”，function（）{
//对于产品选择autopopulate--工作//
$（“#productautocomplete”）.live（“listviewbeforefilter”，函数（e，数据）{
var$ul=$（this），$input=$（data.input），value=$input.val（），html=“”；
$ul.html（“”）；
如果（value&&value.length>2）{
$ul.html（“
”）；
$ul.列表视图（“刷新”）；
$.getJSON（'ajax/getProductList.php'，{term:$input.val（）}，函数（数据）{
var项目=[]；
var str=“”；
for（var输入数据）{
if（data.hasOwnProperty（key））{
var value=数据[key].值；
var label=数据[键]。标签；
var stock=数据[key]。股票；
var proddata=data[key].data；
str+=”
”；
str+=''+标签+'['+股票+']'；
str+='
'；
}
}
$ul.html（str）；
$ul.列表视图（“刷新”）；
$ul.trigger（“updatelayout”）；
});
}
});
//结束搜索
//单击“设置要在对话框中使用的隐藏输入字段”--工作
$（'productautocomplete li'）.live（'click'，函数（e）{
//--------------------获取数据------------------------
var id=$（this.attr（'code'）；
var name=$（this.attr（'name'）；
var data=$（this.attr（'data'）；
var stock=$（this.attr（'stock'）；
//将包装类型和单位信息添加到div数据
$（'proddata'）.attr（'data'，data）；
//将currstock信息添加到div
$（'prodstock'）.attr（'data'，stock'）；
//----------------------隐藏列表
$（'productautocomplete li'）.hide（）；
//----------------------在可见输入框中放置名称
$（'#productsearch input'）.attr（'value'，name）；
//----------------------将id放置在实际表单的隐藏输入框中。
$（'#formproduct'）.val（id）；
//----------------------包装填充选项+显示选择包装div
var filteroptions=data.split（“，”）；
$（“#打包选项”）.remove（）；
对于（var x=0；x好的！我让它工作了！无论如何感谢@Gajotres。步骤：

1a.通过changePage从main.php发送变量：

var prodcode = $('#formproduct').val();
var prodstock = $('#prodstock').attr('data');
var prodqty = $('#qty').val();
var packing = $('#packing').find(":selected").val();
$.mobile.changePage('batch.php', {
    role: 'dialog', 
    data: {'prodcode': prodcode,'prodstock': prodstock, 'prodqty' : prodqty , 'packing' : packing},
    type: 'get' 
});

2a.将整个div id“page3”移动到一个名为“batch.php”的新php页面，在那里我从php获取变量并将其设置为html divs

<?php 
    extract($_GET);
    if (!$prodcode && !$prodstock && !$packing && !$prodqty) {
        header('Location: '.DEF_SITEURL."main.php");
        exit;
    }
?>
<div data-role="page" id="batchpage" data-url="batch.php" data-close-btn="right">

    <div data-role="header">
        <h1>Batch Selection</h1>
    </div>
    <div data-role="content">
    <div style="display:none;" id="batchprodcode" data="<?php echo $prodcode; ?>"></div>
    <div style="display:none;" id="batchprodstock" data="<?php echo $prodstock; ?>"></div>
    <div style="display:none;" id="batchpacking" data="<?php echo $packing; ?>"></div>
    <div style="display:none;" id="batchqty" data="<?php echo $prodqty; ?>"></div>
    <div style="overflow:auto;">
    <table id="batchsel" style="border:1px;">
        <thead>
        <tr>
            <th></th>
            <th>Batch No</th>
            <th>Exp Date</th>
            <th>Brate</th>
            <th>Srate</th>
            <th>Packing</th>
            <th>Stock</th>
            <th>Supplier</th>
            <th>ST%</th>
            <th>Bill Date</th>
            <th>Bill No</th>
            <th>btax</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    </div>
    <div id="remainingdata">
        <p1 id="changeable_requirements"></p1>
        <button id="saveprod" onclick="addProduct(); return false;">Add Product</button>
    </div>
    </div>
</div>

重新加载第一个页面时，您是否再次从php服务器获取值？当他们在选择框中键入某个内容时，将获取产品信息。这将是唯一的获取。还有其他一些代码，如搜索医生/患者……但它们是不相关的，并且在测试时这些部分未被触及。
搜索产品：

我试图找到在两个页面之间传递变量的其他方法，并尝试了类似的方法，但这似乎也没有帮助。
var-prodcode=$（'#formproduct'）.val（）；var-prodstock=$（'#prodstock'）.attr（'data'）；var-prodqty=$（'#qty'）.val（）；var-packing=$（'#packing'）.find（'）。find（“：selected”）.val（）；$.mobile.changePage（'#page3'，{role:'dialog'，data:{'prodcode'：prodcode，'prodstock'：prodstock，'prodqty'：prodqty，'packing'：packing}，键入：'get'}）
并检索变量：
$（文档）。在（'pageshow'，“#page3'，function（）{var url=$（“#page3”）.attr（“数据url”）；
$( document ).on( "pageshow", "#batchpage", function() {
   $('#batchsel tbody').empty();
   var prodcode = $('#batchprodcode').attr('data');
   var prodstock = $('#batchprodstock').attr('data');
   var prodqty = $('#batchqty').attr('data');
   var packing = $('#batchpacking').attr('data');
   ...
});