加载时的 jQuery Mobile 和 ajax

Question

这个问题我已经有一段时间了，我在网上尝试了很多解决方案，但都没有奏效。

我需要的是在页面加载时将数据从 json 提供给 listview 并呈现它，但它只适用于索引，之后我需要重新加载每个页面以便我可以看到 listview。

这是我的 jquery 代码：

$(document).bind("mobileinit", function () {
                $.mobile.ajaxEnabled = false;
            });
            $(document).bind('pageinit',function() {
                DrawPageContent();
            });

             function DrawPageContent() {
             $.ajax({
                  dataType: "json",
                  url: "js/categorias.json",
                  success: function(msg){
                                console.log(msg.categorias[1].nombre);
                                var categos = '';
                                for(var i=0;i<msg.categorias.length;i++){
                                    categos += '<li><a href="refrescos.html?id='+ 0 +'"><img src="'
                                    + msg.categorias[i].logo + '"><h2>'+msg.categorias[i].nombre
                                    + '</h2><p>' + msg.categorias[i].desc + '</p></a></li> ';
                                }
                                $("#categorias").html(categos);
                                $("#categorias").listview("refresh");
                                //$("#page").trigger("pagecreate");
                            }
                });}

我也尝试过 $(document).ready() 和其他一些东西。

这是该部分的 HTML：

<div id="page" data-role="page">

    <div data-role="header">
        <h1>Categorias</h1>
        <a href="#popupOpciones" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="gear" data-theme="b" data-transition="pop">Opciones</a>
    </div>

    <div data-role="content">
        <ul id="categorias" data-role="listview" data-inset="true">
        </ul>

任何想法如何解决这个问题？

Answer 1

如果您每次都尝试附加到 id "categorias"，这就是它只附加到第一页的原因。

在 JQuery mobile 中，加载的页面实际上并没有立即从 DOM 中删除。这意味着，如果您加载的页面不止一个，其中包含带有 id 类别的 and 元素，那么最终会出现多个带有标识它们的类别的 DOM 元素。在这种情况下，它只会附加到第一个，这可以解释为什么它不会显示在您的其他页面上，直到您刷新并且其他页面从 DOM 中删除。

这里一个好的解决方案是给每个页面一个唯一的标识符，然后使用从该页面中选择类别

$("#categorias", "#pageidentifier");

此选择器将在您指定的特定页面内搜索以查找您的分类元素。