jQuery windows 移动应用程序“附加(html)不起作用”

Posted

技术标签:

【中文标题】jQuery windows 移动应用程序“附加(html)不起作用”【英文标题】:jQuery windows mobile app "append(html) not working" 【发布时间】: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? 【参考方案1】:

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

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

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

【讨论】:

以上是关于jQuery windows 移动应用程序“附加(html)不起作用”的主要内容,如果未能解决你的问题,请参考以下文章

使用 Ajax 将列表项附加到 jquery 移动列表

附加 DOM 元素不适用于 jQuery 可选

单击表单中的按钮后,通过 Ajax 附加 html 页面

jquery在ei中的引号上附加窒息

将 HTML 动态附加到 Div 后,Jquery Mobile Slider 不滑动

jquery $(window).resize 事件在移动向上或向下滚动时触发