Question

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

但我的JavaScript似乎表现得有些奇怪，所有脚本都运行（我使用alert s检查过），但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

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

Answer 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成功事件。但我认为这只是一个复制粘贴错误。

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

2 个答案: