Question

我正在使用jQuery Mobile创建一个项目，并且在尝试链接单独的HTML页面时遇到了麻烦。截至目前，我有两个单独的HTML文件：pageInitEvent.htm和pageInitEvent2.htm。我在两个页面上都有按钮，并且想要在单击时相互链接，当点击第一页上的按钮（pageInitEvent.htm）时，我还会触发一个事件（或者我希望它被触发）。我已使用$（document）.on（“pageinit”，“。pageinit2”，function（）{（pageInitEvent.htm文件的一部分）将此事件绑定到pageInitEvent2.htm。

我的问题是，如果我没有在两个按钮中包含rel =“external”它们将无法工作并且只是发出错误，如果我将rel =“external”添加到两个按钮，那么它们链接正常但事件仍然没有被触发和页面转换，如果任何不起作用。是否有任何方法可以链接2个单独的html文件，而不会影响页面转换并使事件有效？我尝试使用多页HTML文件并且它完美地工作，只是当我将它们分成不同的HTML文件时，一切都搞砸了

以下是pageInitEvent.htm的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Listing 4.1</title>
    <!-- name attribute tells the browser the meta tag contains information about the viewport or the display size of the page -->
    <!-- content attribute tells browser to display the page with the same dimensions as the device it is beign viewed on -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The jQuery Mobile CSS style sheet -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <!-- The standard jQuery library -->
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>


   <script type="text/javascript">
         $(document).on("mobileinit", function(){
            //$.extend allows to merge two objects together
            //$.mobile is the target object to add or merge to
            //The second argument to this function is the settings we want to change or merge to the $.mobile object
            $.extend($.mobile, {
                //change the message that appears when a pageLoadError happens
                pageLoadErrorMessage: 'Either the page cannot be found or it cannot be loaded.'
            });
        }); 

        //binds the pageinitevent with the page pageInit2
        //third argument is an anonymous inner functi
        $(document).on("pageinit", ".pageinit2", function(){
            alert("pageinit is bound!");
        }); 
    </script>

    <!-- The jQuery Mobile library -->
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>
<body>
    <div data-role="page">
        <div data-role="header"><h1>pageInit event example</h1></div>
        <div data-role="content">
            <p>The button below will use AJAX to load another page and trigger a bound event</p>
            <a href="pageInitEvent2.htm" data-role="button" >Click to open a new page</a>
        </div>
    </div>  
</body>
</html>

pageInitEvent2.htm的代码是：

<!DOCTYPE html>
<html>
<head>
<title>pageInitEvent2</title>
    <!-- name attribute tells the browser the meta tag contains information about the viewport or the display size of the page -->
    <!-- content attribute tells browser to display the page with the same dimensions as the device it is beign viewed on -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The JQuery Mobile CSS style sheet -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <!-- The standard JQuery library -->
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

    <!-- The jQuery Mobile library -->
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
    <div data-role="page"  data-url="pageInitEvent2.htm" class="pageinit2">
        <div data-role="header"><h1>pageinit example</h1></div>
        <div data-role="content">
            <p>fantastic!</p>
            <a href="pageInitEvent.htm" data-role="button" rel="external" >Amazing, now take me back</a>

        </div>
    </div>
</body>
</html>

Answer 1

尝试在每个div上分配唯一ID。

<div id="pageA" data-role="page"></div>
<div id="pageB" data-role="page"></div>

链接到jQuery Mobile中的外部HTML文件

1 个答案: