1

我正在使用 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>
4

1 回答 1

0

尝试为每个 div 分配唯一的 ID。

<div id="pageA" data-role="page"></div>
<div id="pageB" data-role="page"></div>
于 2012-11-18T04:16:32.367 回答