Question

我正在使用JQuery mobile继续我的任务，我遇到了一个新问题。我创建了一个小型JQuery幻灯片菜单，它使用了JQuery 切换。

             $( "#TestMenu" ).toggle( "slow", function() {});

整个脚本运行正常。 UNTIL，我点击链接并加载页面。即使页面具有相同的内容。

当我按F5时，菜单再次正常工作。我知道，使用Jquery移动设备已经完成了加载。因此，我认为这就是问题所在。

但是如何解决这个问题。我不知道。

我创建了一个小测试用例来隔离问题。

<!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>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <title>Test &amp; Go</title>
        <meta name="viewport" content="width=1080, initial-scale=1, maximum-scale=1, user-scalable=0"/>
        <link href="interface/test/mobile.theme.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script type="text/javascript">
            ///########-------------------------------------------------------------
            ///########-------------------------------------------------------------
            ///######## FUNCTION TO LOAD ALL QUICKHANDLING OPTIONS
            ///########-------------------------------------------------------------
            ///########-------------------------------------------------------------
            function TestAndGoFunctions(){
                ///########-------------------------------------------------------------
                ///########-------------------------------------------------------------
                ///######## HANDLING : CHANGE THE PAYMENT
                ///########-------------------------------------------------------------
                ///########-------------------------------------------------------------
                $("body").on("click", "#TestMenuButton", function() {
                    ///######## TOGGLE THE DISPLAY STATE OF THE MENU
                     $( "#TestMenu" ).toggle( "slow", function() {});
                });
            }


            $(document).ready(function() {
                ///######## LOAD THE Test AND GO FUNCTIONALITY
                TestAndGoFunctions();
            });

        </script>
    </head>
    <body>
            <div id="TestMenuButton"></div>
            <div id="TestMenu">
                <ul>
                    <li><a href="?page=start">Start</a></li>
                    <li><a href="?page=actions">Actions</a></li>
                </ul>
            </div>
        <div id="testBlock">
            VARIABLE = <?php echo @$_GET['page']; ?>
        </div>
    </body>
</html>

我试图制作一个JSfiddle链接..但这不能100％工作，因为它不想重新加载我的页面，所以我不能在那里显示错误。尽管这是链接：

https://jsfiddle.net/ferencik/xucrhvhr/

我编辑了jquery代码，试图自动加载内容。但还没有成功。

在我的代码下面：

        <script type="text/javascript">
        ///########-------------------------------------------------------------
        ///########-------------------------------------------------------------
        ///######## FUNCTION TO LOAD ALL QUICKHANDLING OPTIONS
        ///########-------------------------------------------------------------
        ///########-------------------------------------------------------------
        function TestAndGoFunctions(){
            ///########-------------------------------------------------------------
            ///########-------------------------------------------------------------
            ///######## HANDLING : CHANGE THE PAYMENT
            ///########-------------------------------------------------------------
            ///########-------------------------------------------------------------
            $("body").on("click", "#TestMenuButton", function() {
                ///######## TOGGLE THE DISPLAY STATE OF THE MENU
                $( "#TestMenu" ).toggle( "slow", function() {});
            });
        }

       $(document).on("pageshow", function( event ) {
           TestAndGoFunctions();           
       });

        $(document).ajaxComplete(function(){
            ///######## LOAD THE Test AND GO FUNCTIONALITY
            ///TestAndGoFunctions();
        });

        $(document).ready(function() {
            ///######## LOAD THE Test AND GO FUNCTIONALITY
            ///TestAndGoFunctions();
        });


        function TestClick(){
            $( "#TestMenu" ).toggle( "slow", function() {});
            alert("HI!!");
        }

        </script>

我希望有人能告诉我我做错了什么！

Answer 1

这是因为jquery mobile通过ajax加载新页面，所以基本上ready函数不会'再次加载'。

阅读本文：http://demos.jquerymobile.com/1.1.0/docs/api/events.html 并阅读：Difference between jQuery and jQuery Mobile?

JQuery Mobile Menu（切换）问题

1 个答案: