jQuery windows 移动应用程序“附加（html）不起作用”答案

【问题标题】：jQuery windows mobile app "append(html) not working"jQuery windows 移动应用程序“附加（html）不起作用”
【发布时间】：2013-12-22 00:28:30
【问题描述】：

我正在尝试使用 phonegap for windows mobile 构建待办事项列表移动应用程序。但是在单击“添加”按钮后，列表没有被添加。我的手机屏幕上没有显示任何列表项。但同样的工作在浏览器中非常好。谁能帮帮我！！

html和js代码

    <!DOCTYPE html>
    <html manifest="storage.appcache">
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <script type="text/javascript" charset="utf-8" src="jquery.js"></script>
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8" src="cordova_plugins.js"></script>
        <script type="text/javascript" charset="utf-8">
        var storage = window.localStorage;
        $(document).ready(function(){
            console.log('Inside document.ready');
            initTodoList();
            $("#clearStorage").click(function(){
                console.log('Entering clearstorage');
                storage.clear();
                $('li').remove();
                console.log('Exiting clearstorage');
            });
        });
        function remove_item(key){
            console.log('Entering remove_item');
            storage.removeItem(key);
            console.log('Find and remove element with id = ' + key)
            $('#'+key).remove();
            console.log('Exiting remove_item');
        }
        function add_item() {
            console.log('Entering add_item');
            var d = new Date();
            var key = d.getTime();
            var value = $('#new_item').val();
            storage.setItem(key, value);
            createToDoListItem(key, value);
            $("#new_item").val('');
            console.log('Exiting add_item');
        }
        function initTodoList(){
            console.log("Entering initTodoList " + storage.length);
            for(var i = 0; i < storage.length; i++){
                var key = storage.key(i);
                var value = storage.getItem(key);
                createToDoListItem(key,value);
            }
        }  
        function createToDoListItem(key, value){
            var html = '<li  data-key="' + key + '" id="' + key + '">' + value + '<button onclick="javascript:remove_item(\'' + key + '\')">Delete</button></li>';
            console.log('Appending html ' + html)
            $("#todo_list").append(html);
            $("#todo_list").listview().listview("refresh");
        }


    </script>
  </head>
  <body>
      <div class="app">
            <h1>To Do List</h1>

        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>

    <input type="text" id="new_item">
  <button onclick="add_item()">Add</button>
  <ul id="todo_list">

  </ul>
  <br/>
  <button id="clearStorage">Clear storage</button>
  </body>
</html>

【问题讨论】：

这个问题你解决了吗？
您使用的是哪个版本的 jquery？

标签： jquery windows-phone-7 cordova cordova-2.0.0 jquery-mobile-listview

【解决方案1】：

console.log('Appending html ' + html) 行末尾缺少分号。

此外，如果可能，最好尝试在开发机器上的浏览器上调试 PhoneGap 网页，并在浏览器开发工具的控制台中检查错误。

（并不总是可以使用 PhoneGap 在本地计算机上调试页面，因为您有时需要访问移动功能等）

【讨论】：