jquery - Jquery Mobile listview（'refresh'）不起作用

Question

例如请“jsfiddle.net/wDRLt/14”

请尝试按照步骤 1.单击“A001”然后展开。这对我来说很好用。

2.单击“全选”并选择AAA或BBB然后它会生成新的可折叠集。

3.再次点击“A001”，这次不行。

在第 1 步中 listview('refresh') 运行良好，但在第 3 步中它不起作用

我的代码有什么问题？

请帮我解决它

Answer 1

问题出在HeaderClick功能上：

function HeaderClick(id) {
    id = "a001";  <-- Remove this
    alert(id);
    $("#h2_" + id).unbind("click");
    $.mobile.loading('show');
    $("#ultab_" + id).html(html);
    $("#ultab_" + id).listview('refresh');
    $("#div_" + id).trigger('expand');
    $.mobile.loading('hide');
}

您将 id 变量设为常量，这不是您想要的。

我希望我帮助你！

Answer 2

虽然@dragos 的回答提出了一个有效的观点，但它并不是您的代码的唯一问题。

我已经重构了您的代码并附加了注释。你可以在这里看到它工作http://jsfiddle.net/9W6Rd/ 重要的一点要注意，因为你正在动态地删除和添加元素。您将需要委托事件侦听器，这实质上意味着您侦听页面加载时不在 DOM 中但可能稍后添加的元素上的事件。框架处理事件的冒泡。在这里，代码按您希望的那样工作。

Javascript：

$(document).ready(function () {

    html = '<li data-icon="false"><a href="javascript:void(0)"><h3>001</h3><span class="ui-btn-up-c ui-btn-corner-all ui-mini-text">cost 50</span><span class="ui-btn-up-c ui-btn-corner-all ui-mini-text">buy 100</span><span class="ui-btn-up-c ui-btn-corner-all ui-mini-text" >low 120</span><span class="ui-btn-up-c ui-btn-corner-all ui-mini-text">provide 150</span><span class="ui-btn-up-c ui-btn-corner-all ui-mini-text">last 150</span><span class="ui-li-count ui-count-align">(200) 100 bottle</span></a><a href="Item /ItemInfo"></a></li>';

    var TabItem1 = '<div class="colps" id="a001" data-role="collapsible"><h2>A001<span class="ui-btn-up-c ui-btn-corner-all custom-count-pos">8</span></h2><ul id="ultab_a001" data-role="listview" data-split-icon="info" data-split-theme="d" class="ui-listview"></ul></div>';

    var TabItem2 = '<div class="colps" id="a002" data-role="collapsible"><h2 >A002<span class="ui-btn-up-c ui-btn-corner-all custom-count-pos">8</span></h2><ul id="ultab_a001" data-role="listview" data-split-icon="info" data-split-theme="d" class="ui-listview"></ul></div>';

    // You need to delegate the expand event as you are re-inserting new .colps elements in the select popup.  This means that you cannot set the listener on the returned elements of .colps from the beginning as they will be replaced in future actions.  See http://api.jquery.com/on/ for more info.

    // we are listening to the "expand" event here see http://api.jquerymobile.com/collapsible/
    $(document).on("expand", ".colps", function (event) {
        console.log('clicked');
        // get the ID
        id = $(this).attr('id');
        console.log(id);
        $.mobile.loading('show');
        // get the ul under 'this' which means we are only getting the ul for the selected collapsible
        $('ul', this).html(html).listview().listview('refresh');
        $.mobile.loading('hide');
    });

    var itemtype = "";

    $('#ulType a').on('click', function (event) {
        // Here we have added type-id's as a data attribute in the HTML see http://api.jquery.com/data/ - it allows us to store arbitrary data associated with an element.
        typeid = $(this).data('type-id');
        console.log(typeid);
        if (itemtype != typeid) {
            itemtype = typeid;
            $("#display-view").html(TabItem1 + TabItem2);
            $("#display-view").collapsibleset("refresh");
            console.log(555);
        }
        $("#popType").popup("close");
    });

});