Question

我有一个动态生成的可折叠的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">

提前感谢您花时间看这个。

Answer 1

更新

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

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

<div data-role="page" id="characters"> <script>  </script> </div>

因为您绑定到pageinit而未指定页面。只要启动页面，代码就会执行。

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

$(document).on("pageinit", "#page_id", function () { // code });

jQuery Mobile Collapsible出现两次

1 个答案:

更新