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

Question

我正在尝试在页面加载时使用 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>

Answer 1

此代码应该可以正常运行。

$('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 成功事件。但我认为那只是复制粘贴错误。

Answer 2

您需要将代码包装在委托给 ID page 页面 div 的 pagecreate 事件中。创建页面后，定位该页面中的列表视图 $('#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 */
        }
    });
});

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

Append not working when loading new page

javascript

jquery

html

cordova

jquery-mobile