javascript - localStorage JSON解析后Jquery追加列表

Question

过去一个小时这让我头疼。基本上我会检查 localStorage 以查看是否有 JSON 字符串的缓存版本。如果这样做，我会加载它并将其转换回 JSON 对象。如果没有缓存版本，我将使用 Ajax 并从服务器获取 JSON 对象。

无论哪种方式，在获得 JSON 对象后，我都会调用 parseDirectory 函数来迭代 JSON 数据并创建 html。解析后，它会将 HTML 附加到我的页面中。我已经测试了这两种方法，它们都成功创建了我的 HTML.. 所以我知道我的 JSON 数据很好。我加载了 JSON 数据的缓存版本并在 JSONLint 中运行它，它是有效的。

奇怪的是，当我加载缓存的 JSON 对象时，jQuery 附加功能不起作用。当我使用 Ajax 调用下载它时，它确实有效。这是代码

function loadPhoneList()

    //clearCache("Directory");

// Check if we have a cached version available

    if (isJSONCached("Directory")==true)
    {
        // We have a cached version of this module. Let's load that up
        var JSONobj = loadCachedJSON("Directory");
        parseDirectory(JSONobj);
    }
    else
    {
        $.ajax({
            dataType: 'jsonp',
            jsonp: 'jsonp_callback',
            url: 'http://www.myserver.com/directory.php',
            data: 'cname=' + customername,
            success: function (data)
            {
                // Cache this new JSON info
                cacheJSON("Directory", data );

                // Parse the received JSON data
                parseDirectory(data);

            },
            error: function (errormsg)
            {
                alert(errormsg);
            }
        });
    }

    // Parse the JSON and create our content
    function parseDirectory(JSONobj)
    {
        var model_list = '';

        for (var i=0;i<JSONobj.directory_data.length;i++)
        {
            model_list += '<li class="item item-text-wrap"><p>' + JSONobj.directory_data[i].Name + '</p><p>' + JSONobj.directory_data[i].Number + '</p></li>';
        }

        alert(model_list);

        $("#directoryList").append(model_list);
    }
}

HTML 是

<div class="content-nopadding" >

    <div class="list">
        <div class="item item-divider">
            <center>Phone Directory</center>
        </div>

        <ul class="list" id="directoryList">
            <li class="filler"></li>
        </ul>

    </div>          

</div>      

** 编辑。添加了cacheJSON代码**

// Used to store a cached version of a JSON string in localStorage by Key value
function cacheJSON( key, json )
{
    // Need to convert the JSON object to a string so we can store it
    var JSONtoStr = JSON.stringify(json);

    window.localStorage.setItem(key,JSONtoStr);
}

Answer 1

JSFiddle 中的一切都运行良好。由于我是在移动设备上开发它，原因是 DOM 在 JS 运行之前没有加载。我添加了一个 onDeviceReady 事件处理程序来解决这个问题。

感谢您的浏览!