javascript - 加载新页面时附加不起作用-6ren

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

转载作者：行者123 更新时间：2023-11-30 17:07:13

26

4

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

最佳答案

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

.children().last().trigger("create"); 不是增强 ListView 的正确方法。

$(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 */
        }
    });
});

关于javascript - 加载新页面时附加不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27754413/

26

4

0

文章推荐： javascript - 如何在 html 中将 JSON 显示为格式化 View

文章推荐： c# - Linq2SQL生成的奇怪SQL

文章推荐： c# - 从类继承并添加附加属性

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

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