gpt4 book ai didi

javascript - 在 jQuery Mobile data-role=listview 中动态填充
  • 转载 作者:太空宇宙 更新时间:2023-11-04 14:19:30 26 4
    gpt4 key购买 nike

    在使用 jQuery Mobile 时 <ul data-role="listview"> ,我正在尝试添加一些 <li> s 来自 JavaScript,但是新的 <li>不继承 jQuery Mobile 样式。这是代码:

    <head>
    <script>
    function init()
    {
    msg = "<li> <a href=> New List Item </a></li>";
    document.querySelector('#add_item').innerHTML += msg;
    }

    // call init on load
    window.addEventListener('load',init,false);
    </script>
    </head>

    <body>
    <div id='main' data-role='page' data-theme='c'>
    <div data-role='header'>
    <h1>Welcome!</h1>
    </div>
    <div id='content' data-role='content'>
    <ul data-role="listview" id="list_cars">
    <div id="add_item">
    </div>

    <li> <a href=""> List Item 1</a></li>
    <li> <a href=""> List Item 1</a></li>
    </ul>
    </div>
    <div data-role='footer'>
    <h4>Enjoy reading the book ...</h4>
    </div>
    </div> <!-- End of Min page -->
    </body>

    最佳答案

    首先,您要输入 <li><div> 里面而不是直接在 <ul> 里面.尝试将您的 querySelector 更改为...

    document.querySelector('#list_cars').innerHTML +=  msg;

    或者,如果您想要列表顶部的项目,请使用此...

    document.querySelector('#list_cars').innerHTML = msg + document.querySelector('#list_cars').innerHTML;

    然后,您需要告诉 jQuery Mobile 通过添加...更新该 ListView

    $('#list_cars').listview('refresh');

    最后一节 jQuery Mobile Documentation page about lists描述了此功能。

    这里的工作示例:http://jsbin.com/omepob/1/

    关于javascript - 在 jQuery Mobile data-role=listview 中动态填充 <li>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15885863/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com