另一个html上的Jquery mobile javascript不起作用答案

【问题标题】：Jquery mobile javascript on another html not working另一个html上的Jquery mobile javascript不起作用
【发布时间】：2013-07-23 09:40:18
【问题描述】：

所以我有 2 页示例 page1.html 和 page2.html。从 page1 到 page2 有一个 href 链接。但似乎 page2.html 中的 javascript 被忽略并且没有被调用。（已准备好文件，正文加载无效）

那么 jquery mobile 是否只接受第一页上的 javascripts？

调用page2.html后如何运行javascript？

jquery mobile 的新手，谢谢。

page2.html 上的示例代码类似于第 1 页：

    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
    <script type="text/javascript" src="cordova-2.5.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/imageresize.js"></script>
    <link rel="stylesheet" href="css/jquery.Jcrop.min.css" type="text/css" />
    <script src="js/jquery.-1.10.1.min.js"></script>
    <script>
    $(document).bind("mobileinit", function(){
        $.extend(  $.mobile , {
            defaultPageTransition:'none'    
        });
    });
    </script>
    <script src="js/jquery.mobile-1.3.1.min.js"></script>   
    <body>
    HELLO WORLD
    </body>
    <script>

   $(function() {
    alert('testing js');        
  });
    </script>

【问题讨论】：

你能分享一下你的 html 和代码吗？它使我们更容易调试。
我尝试了带有多个页面 div 的单个 html，它可以在 pageshow 上使用，但仍然想知道如何在单独的 html 中执行此操作，因为我喜欢将 html 保留在多行而不是单页数千行，以后会更难查找和调试

标签： javascript jquery-mobile cordova

【解决方案1】：

您需要了解的有关此问题的所有信息都可以在这里找到：Why I have to put all the script to index.html in jquery mobile

要了解这种情况，您需要了解 jQuery Mobile 的工作原理。它使用 ajax 来加载其他页面。

首页正常加载。它的 HEAD 和 BODY 被加载到 DOM 中，它们在那里等待其他内容。加载第二个页面时，仅将其 BODY 内容加载到 DOM。

这就是为什么您的按钮显示成功但点击事件不起作用的原因。在页面转换期间忽略父 HEAD 的相同点击事件。

这是官方文档：http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

很遗憾，您不会在他们的文档中找到此描述。以太他们认为这是一个常识，或者他们忘记像我的其他主题一样描述这个。（jQuery Mobile 文档很大，但缺少很多东西）。

【讨论】：

【解决方案2】：

根据您发布的代码：

确保包括：

 <script src="js/jquery.mobile-1.3.1.min.js"></script>

之前：

    <script>
    $(document).bind("mobileinit", function(){
        $.extend(  $.mobile , {
            defaultPageTransition:'none'    
        });
    });
    </script>

我确信 mobileinit 是 jquery-mobile 框架的一部分。

其次，我强烈建议按照 jquery-mobile 文档使用定向页面结构。

在一个文档中使用多个 div（页面）的另一个好处是，用户不必在每个页面请求上重新加载所有 javascript/css，从而最大限度地减少使用的带宽量以及页面的性能。

【讨论】：

【解决方案3】：

确保您包含所需的 jquery 库，并且您还可以尝试其他 jquery 移动事件..

页面转换用于动画从当前活动页面 (fromPage) 到新页面 (toPage) 的变化。在这些转换之前和之后触发事件，以便在显示或隐藏页面时通知观察者。触发的事件如下：

显示前的页面

【讨论】：

【解决方案4】：

您应该在每个 html 文件中使用 script 标签包含 jquery 文件，如下所示

<script type="text/javascript" language="javascript" src="jquery-1.6.3.min.js"></script>

【讨论】：