Question

当我尝试从Websql获取动态内容时jQ Mobile Collapsibles停止工作但当我在搜索栏中输入一些输入时它开始工作agin ..所以请帮我解决这个问题,,,,,只需复制和害怕代码并帮助我...... 谢谢你提前

    <html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script>
        $(document).ready(function(){
            var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
            db.transaction(function (tx) {
                tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
               tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
               tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
            });
            db.transaction(function (tx) {
               tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
                  var len = results.rows.length, i;
                  var myFilter = document.querySelector("#myFilter");
                  for (i = 0; i < len; i++){
                     var row = results.rows.item(i);
                     myFilter.innerHTML += '<div data-role="collapsible" data-filtertext="Cities"><h3>Cities</h3><ul data-role="listview" data-inset="false"><li>Copenhagen</li><li>Mexico City</li><li>Oslo</li><li>Paris</li></ul></div>';
                  }
               }, null);
            });
        });
    </script>
    </head>


    <body>
        <div data-role="page" id="pageone">
            <div data-role="header">
                <h1>Filter Collapsible Lists</h1>
            </div>

            <div data-role="main" class="ui-content">
                <form>
                    <input data-type="search" id="filterCollapsibles">
                </form>
                <div data-role="collapsibleset" data-filter="true" data-inset="true" id="myFilter" data-input="#filterCollapsibles">
                </div>
            </div>

            <div data-role="footer">
                <h1>Insert Footer Text Here</h1>
            </div>
        </div> 
    </body>
</html>

Answer 1

尝试在动态修改后刷新小部件，如下所示：

$("#myFilter").collapsibleset("refresh");

我希望这有帮助！

jQ Mobile Collapsibles使用innerhtml添加内容时不起作用

1 个答案: