加载新页面时附加不起作用答案

【问题标题】：Append not working when loading new page加载新页面时附加不起作用
【发布时间】：2015-01-03 11:38:30
【问题描述】：

我正在尝试在页面加载时使用 JavaScript 将数据加载到 div。我正在使用 jQuery Mobile。该页面使用普通的href 调用，我假设它被jQM 劫持到ajax。

但我的 JavaScript 似乎有些奇怪，所有脚本都运行（我使用 alerts 检查过），但 append 函数似乎对页面没有任何影响。各种功能我都试过了：pagecreate、pagebeforeshow、document.ready。

这是我的代码的相关部分：

<body>
<div data-role="page" id="page">
    <div data-role="content" style="padding:0" data-theme="k">      
        <ul class="rig columns-3" style="margin:0;padding-left:0;padding-right:8px;padding-top:20vw" id="DrinkGridView">        
            <!-- <li>
                <img src="images/logo.png" />
                <h3>Image Title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            </li> -->   
        </ul>
    </div><!-- /content -->         
    <script type="text/javascript">
        //$( document ).delegate("#page", "pageinit", function() {
        var global_id;
        var global_data;
        var fields = [];

        $.ajax({                    
            type: "POST",
            url: "http://192.168.1.120/yiibootstrap_old/index.php/userregistration/makedrink",
            cache: false,
            success: function(data)
            {
                var obj = $.parseJSON(data);
                $.each(obj, function() 
                {                           
                    fields.push({id:this['id'],name:this['name'],image:this['image'],Description:this['description']});            
                });
            var count = fields.length;                 
            count1 = parseInt(count);
            for (var r = 0; r < count1; r++)
            {
                $('#DrinkGridView').append('<a id="inline" href=#data><li id="' + fields[r]['id'] + '"> <img src="http://192.168.1.120/yiibootstrap_old/uploads/' + fields[r]['image'] + '"/> <h3><b>' + fields[r]['name'] + '</h3> <p id="sss">' + fields[r]['Description'] + '</p> </li></a>').children().last().trigger("create");
                // THIS APPEND IS NOT SHOWING RESULT !!
            }
        });
        //});    
    </script>   
</div><!-- /page -->
</body>

【问题讨论】：

在您的代码中，ajax 没有正确关闭
它已关闭，我只是在删除一些发布代码时错过了它。代码运行没有错误，但 apppend 方法似乎没有任何效果。
在没有.children().last().trigger("create") 的情况下追加是否有效？还要把a 放在li 里面而不是外面。
在我的测试页面中使用了带有虚假字段的附加代码。这完美无缺。您的 fields 对象是否包含任何数据？
您使用的是哪个 jQM 版本？

标签： javascript jquery html cordova jquery-mobile

【解决方案1】：

您需要将代码包装在pagecreate 事件中，该事件委派给 ID 为 page 的页面 div。创建页面时，定位该页面内的列表视图$('#DrinkGridView', page)。然后你需要在追加元素.listview("refresh")之后调用refresh方法。

.children().last().trigger("create"); 不是增强列表视图的正确方法。

$(document).on("pagecreate", "#page", function () {
    var $listview = $('#DrinkGridView', this), /* target listview */
        global_id,
        global_data,
        fields = [];

    $.ajax({
        type: "POST",
        url: "http://192.168.1.120/yiibootstrap_old/index.php/userregistration/makedrink",
        cache: false,
        success: function (data) {
            var obj = $.parseJSON(data);
            $.each(obj, function () {
                fields.push({
                    id: this.id,
                    name: this.name,
                    image: this.image,
                    Description: this.description
                });
            });
            var count = fields.length;
            count1 = parseInt(count, 10);
            for (var r = 0; r < count1; r++) {
                /* add elements to $listview defined previously */
                $listview.append('<a id="inline" href=#data><li id="' + fields[r].id + '"> <img src="http://192.168.1.120/yiibootstrap_old/uploads/' + fields[r].image + '"/> <h3><b>' + fields[r].name + '</h3> <p id="sss">' + fields[r].Description + '</p> </li></a>');
            }
            /* refresh after for loops is done */
            $listview.listview("refresh"); /* refresh */
        }
    });
});

【讨论】：

OP是否还需要在ul中添加(data-role="listview")
@omar。我是否将 javascript 放在任何特定的 div 中或任何地方都可以使用？
@WhoDatDev 将其放在头部。它会在目标页面创建后运行，并且只会运行一次。
@Omar。没关系。它工作得很好。非常感谢。你能给我任何简单资源的链接，解释所有这些页面转换方法和功能吗？我是 HTML 新手，因此官方文档在我上面。
@WhoDatDev 不客气。阅读更多关于页面事件jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events

【解决方案2】：

这段代码应该可以正常运行。

$('page').on('pageinit', function() {
    var global_id;
    var global_data;
    var fields = [];

    $.ajax({                    
        type: "POST",
        url: "http://192.168.1.120/yiibootstrap_old/index.php/userregistration/makedrink",
        cache: false,
        success: function(data)
        {
                var obj = $.parseJSON(data);
                $.each(obj, function() 
                {                           
                    fields.push({id:this['id'],name:this['name'],image:this['image'],Description:this['description']});            
                });
            var count = parseInt(fields.length);                 

            for (var r = 0; r < count; r++)
            {
                $('#DrinkGridView').append('<li id="' + fields[r]['id'] + '"><a id="inline" href=#data><img src="http://192.168.1.120/yiibootstrap_old/uploads/' + fields[r]['image'] + '"/> <h3><b>' + fields[r]['name'] + '</h3> <p id="sss">' + fields[r]['Description'] + '</p></a></li>').children().last().trigger("create");
                // Switched the a and the li, but that didn't prevent the code from working.
            }
        }
    });
});

在发布的代码中有一个 } 缺失应该关闭 ajax 成功事件。但我认为这只是一个复制粘贴错误。

【讨论】：

"但我的 JavaScript 似乎有些奇怪，所有脚本都运行（我使用警报检查过），但附加功能似乎对页面没有任何影响。" 更不用说.ready()应该在jQM中使用。