在AJAX调用之后,JQuery Mobile init切换

时间:2015-02-12 16:40:25

标签: ajax function jquery-mobile init

这是我之前提出的问题的新版本。 实际上还没有找到问题的最终解决方案。

我在上一个问题中并不知道导致问题的原因。 现在我知道它是什么了。

测试用例:

  • HTML
  • CSS
  • JQuery Mobile

  • 单击简单按钮可打开菜单

  • 点击菜单中的链接时,会加载所需的页面
  • 在屏幕上显示项目并允许用户再次单击该页面

问题是: 当通过AJAX加载下一页时,代码为:

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

停止工作。 这应该可以通过重新初始化函数来解决。但是我不知道如何做到这一点...

见下面的代码:

    <!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 TestAndGoFunctions(){
                $("body").on("click", "#TestMenuButton", function() {
                    ///######## TOGGLE THE DISPLAY STATE OF THE MENU
                    $( "#TestMenu" ).toggle( "slow", function() {});
                });
            }
            $(document).on('pageinit',function(){
                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 onclick="TestClick();">CLICK</div>
            <ul style="background-color: blue; color: white;">
                <li><a href="?page=start">Start</a></li>
                <li><a href="?page=actions">Actions</a></li>
            </ul>
        </div>
    </body>
</html>

我希望有人知道问题所在。 提前谢谢!

0 个答案:

没有答案