单击 jQuery Mobile 中的按钮链接会导致 pageinit 行为不端答案

【问题标题】：Clicking on a button link in jQuery Mobile causes pageinit to misbehave单击 jQuery Mobile 中的按钮链接会导致 pageinit 行为不端
【发布时间】：2013-01-10 13:47:09
【问题描述】：

我在一个页面上有以下代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Appski</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="http://code.jquery.com/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>
</head> 
<body> 
<div data-role="page" id="quizPage">
        <div data-role="content">   
            <button id="bigButton"></button>
        </div><!-- /content -->
</div><!-- /page -->
</body>

<script>
    $(document).ready(function() { 
        $("#bigButton").html("hello");
        $("#bigButton").button('refresh'); 

    });

    $("#bigButton").click(function() {
        window.location.replace("page2.html");
    });
</script>


</html>

当我加载此页面时，它工作正常并在按钮中显示“你好”，但是当我从另一个 jQuery Mobile 页面链接到类似以下源代码的内容时，页面加载时按钮中没有出现任何文本（以及链接也不起作用）：

<a href="page1.html" data-role="button">click me</a>

【问题讨论】：

可能重复[链接到页面时按钮文本（基于 JSON 调用）未加载] 同一个人提出的相同问题。 (stackoverflow.com/questions/14236170/…)

标签： jquery jquery-mobile

【解决方案1】：

这是因为当您返回上一页时，jquery mobile 进行了 ajax 调用。

所以实际上，当您单击第二页上的按钮时，它会通过 ajax 调用直接加载第一页的 data-role="page" 部分，这就是您不会得到您在第一页上显示的脚本的原因Hello 按钮。

因此，在这种情况下，您还需要在第二页上插入相同的脚本，或者如果适合您，您可以在每个页面上使用通用页眉。

不要使用$(document).ready，你应该使用$(document).on('pageinit')。有关详细信息，请参阅文档here。

这是你的第一页：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Appski</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
     <link rel="stylesheet" href="css/style.css" />
    <script src="http://code.jquery.com/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>
  $(document).on('pageinit',function(e){
    $("#bigButton").html("hello");
        $("#bigButton").button('refresh');         
    });
</script>  
</head> 
<body>
<div data-role="page" id="quizPage">
        <div data-role="content">   
            <button id="bigButton"></button>
        </div><!-- /content -->
</div><!-- /page -->
</body>
</html>

第二页

<!DOCTYPE html> 
<html> 
<head> 
    <title>Appski</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="http://code.jquery.com/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>
  $(document).on('pageinit',function(e){
    $("#bigButton").html("hello");
        $("#bigButton").button('refresh');         
    });
</script> 
</head> 
<body> 
<div data-role="page" id="quizPage">
        <div data-role="content">   
          <a href="main.html"  data-role="button">click me</a>
        </div><!-- /content -->
</div><!-- /page -->
</body>
</html>

我对此进行了测试，它对我有用。您可以进一步优化这些页面的代码。

你最好也通过official event docs。

【讨论】：