Question

我正在研究jQuery Mobile，目前偶然发现了一个障碍

在成功创建“任务”（我按照rails App）后，渲染到“任务”索引页面ul#listview与计数气泡的索引页面妥协这是kind。在页面下方有一个脚本来获取计数，如泡泡示例中所示（如上所述），但似乎脚本永远不会执行。

以下是代码：

partials =＆gt; _index.html.erb

<div data-role="page" id="task">
 <div data-role="header">
    <h1>Tasks</h1>
 </div>
<div data-role="content">
  <ul data-role="listview">
    <li>
       <a href="/mytasks"> My Task 
         <span class="ui-li-count" id="my_tasks" ></span>
       </a>
        </li>
    <li>
       <a href="/alltasks"> All Task 
         <span class="ui-li-count" id="all_tasks" ></span>
       </a>
    </li>
</div>
  <script type="text/javascript">
    $("#task").live("pageinit",function() {
       alert("Update the count");
       // The below method fetched the count 
       go_fetch_the_count("mytasks","all_tasks");
     })
  </script>
</div>

我也尝试过：

$(document).ready(function() { // above function // }) ,
    $("#task").live("pagecreate",function(){ // above function // })
    $("#task").live("pageshow",function(){ // above function // })
    $("#task").live("pagebeforecreate",function(){ // above function // })

但似乎连警报也没有被执行。

此致 Viren Negi

Answer 1

您缺少结束</ul>标记。但即使没有这个对我来说还行。你没有其他data-role=page的模板/布局吗？

此代码适用于我（包括缺少的UL）

<!DOCTYPE html> 
<html> 
    <head> 

    <title>Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</script>
</head> 
<body>
    <div id='jQMpage' data-role="page" data-theme='e'>


 <div data-role="header">
    <h1>Tasks</h1>
 </div>
<div data-role="content">
  <ul data-role="listview">

    <li>
       <a href="/mytasks"> My Task 
         <span class="ui-li-count" id="my_tasks" ></span>
       </a>
        </li>
    <li>
       <a href="/alltasks"> All Task 
         <span class="ui-li-count" id="all_tasks" ></span>
       </a>

    </li>

</div>
  <script type="text/javascript">
      $("#jQMpage").live("pageinit", function () {
          alert("Update the count");
      })
  </script>


    </div><!-- /page -->
</body>
</html>

Answer 2

上述问题有2个解决方案我设法找出

<强>解

通过 pagehide 事件从dom中删除页面，以便页面中只有一个dom 相同的dom id 。像这样的东西

$（'＃car_list'）。live（'pagehide'，function（）{
      $(this).remove(); 

    });

（如果您启用了jquery-mobile后退功能，则该方法有一个严重的警告。它可能会让您登录页面，其页面隐藏事件已将删除男人的土地情况。再加上删除和下载一个页面只是因为泡沫计数在页面中发生了变化是一个非常艰难的交易，第二个解决方案适用于我）

此解决方案在页面上定义了全局变量，每次调用 get_count 方法时，都会检查全局变量是否定义如果是更新当前只计算旧页面更新方式的页面

function get_count() { $.ajax( { url:'/get_count.json', dataType : "json", success : function(result) { $.each(['fer','lam','fia','cor','mer'],function(index,value) { console.log(window.reloaded); // the below if statement will only execute for the second time if (window.reloaded && typeof(window.reloaded) != "undefined") { console.log("hello"); $(".ui-page-active").find("#"+value).text(result[value]) } $("#"+value).text(result[value]); }) window.reloaded = true ; } }); }

使用heroku app中的第二个解决方案更新代码。

接受此作为有效答案，直到某些提供更好的方式来实现相同

jquery mobile不会对ajax请求的响应执行脚本

2 个答案: