0

我找到了 jquery mobile 的这个插件 它工作正常，但我无法在第二页加载时执行任何代码，我尝试了任何类型的 jqmobile 事件但没有...

这是 page1.htm 的代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="css/jquery.mobile-1.0b2.min.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.mobile.pagination.css" rel="stylesheet" type="text/css" />

    <script type='text/javascript' src='Js/Libs/jquery-1.6.2.min.js'></script>
     <script type='text/javascript' src='Js/Libs/jquery.mobile-1.0b2.min.js'></script>
    <script type='text/javascript' src='Js/Libs/jquery.mobile.pagination.js'></script>
</head>
    <body>
        PAGE1
        <ul data-role="pagination">
            <li class="ui-pagination-prev"><a href="page0.htm">Prev</a></li>
            <li class="ui-pagination-next"><a href="page2.htm">Next</a></li>
        </ul>

    </body>
</html>

这是 page2.htm 的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">

    <link href="css/jquery.mobile-1.0b2.min.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.mobile.pagination.css" rel="stylesheet" type="text/css" />

    <script type='text/javascript' src='Js/Libs/jquery-1.6.2.min.js'></script>
     <script type='text/javascript' src='Js/Libs/jquery.mobile-1.0b2.min.js'></script>
    <script type='text/javascript' src='Js/Libs/jquery.mobile.pagination.js'></script>

    </head>
    <body onload="">
        <script type="text/javascript">

                        $('div').live('pageshow', function (event, ui) {
                            alert('This page was just hidden: ');
                        });

        </script>    
    </body>
</html>
4

1 回答 1

2

页面内容必须用 包裹，如下所示：data-role="page" DIV

<div data-role="page" id="test2">

这是一个工作示例：

测试.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
            <link href="http://filamentgroup.com/examples/jqm-pagination/jquery.mobile.pagination.css" rel="stylesheet" type="text/css" />
            <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"/></script>    
            <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"/></script>
            <script src="http://filamentgroup.com/examples/jqm-pagination/jquery.mobile.pagination.js"/></script>    
      </head>
      <body>
                <div data-role="page" id="test">        
                    PAGE1
                    <ul data-role="pagination">
                        <li class="ui-pagination-prev"><a href="test1.html">Prev</a></li>
                        <li class="ui-pagination-next"><a href="test2.html">Next</a></li>
                    </ul>    
            </div>   
      </body>
</html>

test2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <link href="http://filamentgroup.com/examples/jqm-pagination/jquery.mobile.pagination.css" rel="stylesheet" type="text/css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"/></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"/></script>
        <script src="http://filamentgroup.com/examples/jqm-pagination/jquery.mobile.pagination.js"/></script>       
        </head>
    <body>
          <div data-role="page" id="test2">     
                    PAGE2
                    <ul data-role="pagination" id="second-page-pagination">
                        <li class="ui-pagination-prev"><a href="test.html">Prev</a></li>
                    </ul>            
                <script type="text/javascript">
                                $(document).on('pagebeforeshow', '#test2', function(event){  
                                      if(event.handled !== true) // This will prevent event triggering more then once
                                      {
                                alert('This page was just hidden: ');       
                                            event.handled = true;
                                      }
                                      return false;                                                             
                                });
                </script>
            </div>
    </body>
</html>

如果您想了解更多为什么这是必要的，请查看这篇文章，为了透明，这是我的个人博客。或者可以在这里找到。

于 2013-01-30T09:50:42.837 回答