jQuery Mobile:Javascript在第一页加载中不起作用/直到刷新

时间:2018-06-30 14:40:05

标签: javascript jquery jquery-mobile

该测试至少需要2页才能重新创建问题。 考虑下面的基本代码:page1.html和page.html。 两者是相同的。

要重新创建问题,只需执行

  1. 加载page1.html
  2. 点击“转到page2.html”
  3. 单击“测试JS”,您会发现它在应有的状态下不起作用
  4. 现在尝试刷新page2.html,现在它将正常工作

// page1.html

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
            <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>      
            <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        </head>
        <body>

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

                <div data-role="content">

                    <a href="#" id="testJS">test JS</a>

                    <br />          

                    <script type="text/javascript">
                        $('#testJS').click(function() {
                            alert('JS works');
                        });                 
                    </script>       

                    You are on page 1   
                    <hr />      
                    <a href="page2.html">Go to page 2</a>               

                </div>

            </div>  

        </body>
    </html>

// page2.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>      
        <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>

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

            <div data-role="content">

                <a href="#" id="testJS">test JS</a>

                <br />          

                <script type="text/javascript">
                    $('#testJS').click(function() {
                        alert('JS works');
                    });                 
                </script>

                You are on page 2               
                <hr />              
                <a href="page1.html">Go to page 1</a>           

            </div>

        </div>  

    </body>
</html>

我看到的解决方案是必须放置rel="external"(例如<a href="page2.html" rel="external>Go to page 2</a>)。它可以工作,但是有比在网站上的每个链接中都更好的全局解决方案吗?

0 个答案:

没有答案