jQuery Mobile Collapsible 出现两次答案

【问题标题】：jQuery Mobile Collapsible appearing twicejQuery Mobile Collapsible 出现两次
【发布时间】：2014-01-20 13:41:57
【问题描述】：

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

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

【问题讨论】：

标签： jquery-mobile collapsable jquery-mobile-collapsible codiqa

【解决方案1】：

更新：

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

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

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

因为您绑定到pageinit 而不指定页面。每当一个页面被启动时，代码就会被执行。

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

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

【讨论】：

感谢您的回复！它现在工作得更好了，除了一件事：在初始加载时，它根本不显示任何内容。我必须点击刷新。单击刷新后，它就可以正常工作了。
@mrbranden 您在使用单页模式吗？每个页面在一个单独的 HTML 文件中？如果是，请将代码放在目标页面中。
没错，我使用的是单页模型。我将 JS 放在目标页面中（参见上面的编辑代码），这解决了它没有出现在页面加载中的问题......但现在我们又回到了打印双精度！如果 pageid 包含在页面 div 本身中，是否有必要将其添加到 pageinit？再次感谢！
如果添加了page id后问题依旧，使用.one代替.on@mrbranden
做到了！非常感谢，你让我度过了一个下午！ :-)