0

たとえば、「jsfiddle.net/wDRLt/14」にしてください

「A001」をクリックして展開します。それは私にとってはうまくいきます。

2.[すべて選択] をクリックして、AAA または BBB を選択すると、新しい折りたたみ可能なセットが生成されます。

3.「A001」をもう一度クリックしますが、今度はうまくいきません。

ステップ1 listview('refresh') ではうまくいきますが、ステップ3ではうまくいきません

私のコードで何が間違っていますか?

それを解決するのを手伝ってください

4

2 に答える 2

0

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

});
于 2013-11-05T09:48:56.383 に答える