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");
    });

});

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

2 个答案: