1

我有一个动态生成的可折叠的 jQuery Mobile 页面。它工作得很好，除非我离开页面然后返回它。发生这种情况时，可折叠项会出现两次。刷新解决了这个问题，但这显然不是一个好的解决方案。这里的其他人描述了类似的症状，但他们的解决方案对我不起作用。我希望有人可以帮助我。我想我可能在滥用pageinit ...

我将 jQuery 1.9.1 与 jQuery Mobile 1.3.1 一起使用。我正在使用 Codiqa 生成我的页面，因此我使用 jQuery 1.3.1。我生成的代码使得每个页面都是一个单独的 html 文件。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Characters | PCT</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <link href="css/codiqa.ext.css" rel="stylesheet">
  <link href="css/jquery.mobile-1.3.1.css" rel="stylesheet">

  <script src="js/jquery-1.9.1.js"></script>
  <script src="js/jquery.mobile-1.3.1.js"></script>
  <script src="js/codiqa.ext.js"></script>
  <script src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script>
  <script src="js/pct.js"></script>

</head>
<body>
   <div data-role="page" data-control-title="Characters" id="characters" 
      class="character_page">
   <script>
  $(document).on("pageinit", "#characters", function() {
    var charQuery = new Parse.Query("Character");
            charQuery.equalTo("user", Parse.User.current());
            charQuery.find({
           success: function(results) {
                  for (var j = 0; j < results.length; j++) {
                var object = results[j];
        var charName = object.get('charName');
        var charNumActions = object.get('charNumActions');
        var charSpd = object.get('charSpd');

                    $("#char_list").append("<div data-role='collapsible'><h4> " + 
                    charName + "</h4><p><strong>Number of Actions:</strong> " + 
                    charNumActions + "</p><p><strong>Spd:</strong> " + charSpd + "</p>
                    <a data-role='button' class='edit_button' 
                    href='edit_character.html?charname=" + charName + "' data-icon='edit' 
                    data-iconpos='left'>Edit</a><a data-role='button' 
                    id='delete_char_button' class='delete_button' data-inline='true' 
                    data-icon='delete' data-iconpos='left'>Delete</a></div>");

                    $("#char_list").collapsibleset("refresh");
                $(".edit_button").buttonMarkup();
        $(".delete_button").buttonMarkup();
         }
             }
         }); 
    });
</script> 
  <div data-theme="a" data-role="header">

提前感谢您抽出宝贵时间查看此内容。

4

1 回答 1

1

更新：

根据您编辑的 OP 和下面的评论，使用单页模型时，与特定页面相关的函数/JS 代码应放置在该页面的 div 中。

jQuery Mobile 使用 Ajax 加载页面，它会加载第一个加载页面head标签的所有库和代码，而忽略其余部分，因为它只加载div data-role="page"。

<div data-role="page" id="characters">
  <script>
    <!-- place code here -->
  </script>
</div>

因为您绑定到pageinit没有指定页面。每当启动页面时，都会执行代码。

您应该将其绑定到页面 id以仅触发一次。

$(document).on("pageinit", "#page_id", function () {
  // code
});
于 2014-01-03T07:22:01.033 回答