Question

我今天遇到了一个奇怪的问题。在我的jquery移动项目中，我从index.html加载一个页面。我挂钩了pageload事件来更新外部页面中输入的默认值。使用Jquery mobile 1.3.2，我的程序运行正常。但是在我转移到Jquery 1.4.5之后，我可以捕获事件，但是我在回调中找不到指定的输入元素。我搜索了API文档，似乎在1.4.0中弃用了pageload事件，建议使用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>

Answer 1

您不是在提取的网页中查找该元素，而是指ID为input的DOM中的第一个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

如何使用Jquery mobile 1.4.5在Page Load回调中查找元素

1 个答案: