Question

我尝试动态填充列表，该列表应具有以下结构：

<ul class="todo-list m-t small-list ui-sortable" id="myList">
    <li>
        <a href="#" class="check-link">
            <i class="fa fa-check-square"></i>
        </a>
        <span class="m-l-xs todo-completed">Buy a milk</span>
    </li>
    <li>
        <a href="#" class="check-link">
            <i class="fa fa-check-square"></i> 
        </a>
        <span class="m-l-xs  todo-completed">Go to shop and find some products.</span>
    </li>
    <li>
        <a href="#" class="check-link">
            <i class="fa fa-square-o"></i> 
        </a>
        <span class="m-l-xs">Send documents to Mike</span>
        <small class="label label-primary">
            <i class="fa fa-clock-o"></i> 
            1 mins
        </small>
    </li>
    <li>
        <a href="#" class="check-link">
            <i class="fa fa-square-o"></i>
        </a>
        <span class="m-l-xs">Go to the doctor dr Smith</span>
    </li>
    <li>
        <a href="#" class="check-link">
            <i class="fa fa-square-o"></i> 
        </a>
        <span class="m-l-xs">Plan vacation</span>
    </li>
</ul>

以下过程会将这些项目添加到列表中，但这些项目的行为并非如此：

function populateMyList(items){
    $("#myList").empty();
    items.forEach(function(listItem) {
        var strToAppend = '<li>' +
            '<a href="#" class="check-link"><i class="fa fa-square-o"></i> </a>' +
            '<span class="m-l-xs">' + listItem + '</span>' +
            '</li>';
        $("#myList").append(strToAppend);
        //$('#myList').listview('refresh');
    });

如果包含行$('#myList').listview('refresh');，则会出现以下错误：

未捕获的TypeError：$（...）。listview不是函数

如果对该行进行了注释，则会填充这些项目，但复选框不起作用。

环顾四周寻找类似的问题，我注意到有些问题是通过使用不同版本的jQuery解决的（我使用2.1.4）。由于其他项目依赖于jQuery版本2.1.4，我无法切换到其他版本，我想这不是解决问题的正确方法。

有谁知道如何使用所有功能动态填充列表？

修改

其实我想修改this bootstrap模板（TODO小版本列表）

我尝试包含所有依赖项here并运行示例但它不起作用

无法动态添加功能列表项

0 个答案: