如何使用 Jquery mobile 1.4.5 在 PageLoad 回调中查找元素答案

【问题标题】：How to find an element in PageLoad callback with Jquery mobile 1.4.5如何使用 Jquery mobile 1.4.5 在 PageLoad 回调中查找元素
【发布时间】：2014-12-27 09:01:33
【问题描述】：

我今天遇到了一个奇怪的问题。在我的 jquery 移动项目中，我从 index.html 加载一个页面。我挂钩了 pageload 事件以更新外部页面中输入的默认值。使用 Jquery mobile 1.3.2，我的程序运行良好。但是在我搬到 Jquery 1.4.5 之后，我可以捕捉到事件，但我在回调中找不到指定的输入元素。我查了API文档，好像pageload事件在1.4.0已经弃用了，建议使用pagecontainerload。但结果是一样的。我仍然找不到元素。太奇怪了。有人可以看看我的代码并给我任何提示吗？以下是我的代码： bonon.js：

  $(document).bind("pageload",function(event,data1){
        var url=data1.url;
        var uri=url.substring(url.lastIndexOf("/"),url.lastIndexOf("."));

        if(uri=="/page2"||uri=="/zhgl"||uri=="/jymxcx"||uri=="/zzmxcx")
        {
            $("#inputtest").val("haha");
            alert($("#inputtest").val());
        }

    });

index.html:

 <!DOCTYPE html>
        <html>
            <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Icons - jQuery Mobile Demos</title>
            <link rel="shortcut icon" href="../favicon.ico">
            <!--
            <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
            -->
            <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
            <script src="js/jquery.js"></script>
            <script src="js/jquery.mobile-1.4.5.min.js"></script>
            <script src='js/bonbon.js'></script>
            <style id="custom-icon">
                .ui-icon-myicon:after {
                    background-image: url("_assets/img/glyphish-icons/21-skull.png");
                    /* Make your icon fit */
                    background-size: 18px 18px;
                }
            </style>
        </head>
        <body>

        <div data-role="page" class="jqm-demos" data-quicklinks="true">
            <div data-demo-html="true" data-demo-css="#custom-icon">
                <button id="mybutton" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-myicon">myicon</button>
                </div>
                <a href="page2.html"> click me </a>
                <a href="#" onclick="window.location='hbuilderindex.html'"> hbuilder me </a>
        </div><!-- /page -->

        </body>
        </html>

这是page2.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title></title>
    </head>
    <body>
        <div id='page2' data-role="page" class="jqm-demos">
            <div data-role='content'>
            <input id="inputtest" value="123" />    
            </div>
        </div>
        <!-- /page -->
    </body>

</html>

【问题讨论】：

标签： jquery jquery-mobile pageload

【解决方案1】：

您不是在获取的页面中查找元素，而是在 DOM 中引用第一个 input，id 为 inputtest。

pagecontainerload 的数据返回许多对象。其中两个包含提取的 HTML，data.toPage 和 data.page。使用它们中的任何一个来查找该页面的元素。

$(document).on("pagecontainerload", function (event, data1) {
    var url = data1.url;
    var uri = url.substring(url.lastIndexOf("/"), url.lastIndexOf("."));

    if (uri == "/page2" || uri == "/zhgl" || uri == "/jymxcx" || uri == "/zzmxcx") {
        $("#inputtest", data1.toPage).val("haha");
        /* or data1.toPage.find("#inputtest").val("haha"); */
    }
});

Demo

【讨论】：

啊，我明白了。非常感谢您的帮助奥马尔。是的。我可以看到 toPage 包含获取的 HTML 的所有元素。
@ping 不客气 :) 当您加载页面 .pagecontainer("load", "page.html") 时使用 .page。导航到页面时使用.toPage。