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

Question

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

请尝试一步一步来 1.点击“A001”然后展开。对我来说效果很好。

2.点击“全选”，选择AAA或BBB，生成新的可折叠集。

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

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

我的代码有什么问题？

请帮我解决一下

Answer 1

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

我已经重构了您的代码并附加了 cmets。你可以看到它在这里工作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");
    });

});

Answer 2

问题出在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 变量设置为常量，这不是您想要的。

希望对你有帮助！！