2

奇妙な問題が発生します。バグのようです。

Jqueryモバイルリストに動的にネストされたリストを含むリストアイテムを追加しています。次に、[新しいリスト]アイテムをクリックすると、[新しいネストされたリスト]が開きますが、その前のネストされたリストアイテム（新しいものを追加する前の最後のネストされたリストアイテム）も開きます。

これがフィドルです-

http://jsfiddle.net/codenameavi/qSrfv/13/

[ブラウザの[戻る]ボタンを使用して、フィドルのネストされたリストとメインリストの間を移動します]

このコードで動的に追加-

$("#addBttn").click(function() {

      // adding a LI with Nested List in Main List
      var li = '<li data-icon="false" data-theme="a"><a>NEW ITEM</a>'

                 + '<ul data-role="listview" data-inset="true" data-theme="h" data-dividertheme="a">'
                     + '<li data-icon="false" data-theme="b">'
                     + '<a>NEW ITEM 1</a></li>'
                     + '<li data-icon="false" data-theme="b">'
                     + '<a>NEW ITEM 2</a></li>'          
                 + '</ul>'

               + '</li>';

    $("#newsListContent").append(li).trigger('create');
    $("#newsListContent").listview('refresh');
});

編集

はい、それはバグです。報告されたばかりの問題-https：//github.com/jquery/jquery-mobile/issues/5098

バグは最新バージョンにもあります。

4

2 に答える 2

1

これを試してください、それは動作します：
編集：

var i=1;
$('#addBttn').click(function() {

     // adding a LI with Nested List in Main List
     var li = '<li data-icon="false" data-theme="a">NEW '+i+'</li>';
     $('#newsListContent').append(li);

    var ul = '<ul data-role="listview" data-inset="true" data-theme="h" data-dividertheme="a" id="ul_'+i+'">'
                     + '<li data-icon="false" data-theme="b">'
                     + 'NEW ITEM '+i+'</li>'
                     + '<li data-icon="false" data-theme="b">'
                     + 'NEW ITEM '+i+'</li>'          
                 + '</ul>';   
    $('#newsListContent li:last').append(ul).trigger('create');

    $('#newsListContent').listview('refresh');

    i++;
});

http://jsfiddle.net/ouadie/prZ9a/1/

于 2012-09-26T23:47:12.290 に答える
0

これはバグのようです。

jQMは、同じdata-urlを持つ非表示のページに関連するli要素の子アンカータグにインデックス番号を追加します。

何が起こっているのかというと、新しいli要素はリストの最後のli要素と同じ番号を持っているため、2つのページが互いに積み重ねられて表示されます。

それはFOOD要素です：

<a href="#list&amp;ui-page=newsListContent-0" class="ui-link-inherit">FOOD</a>

hrefに追加されたインデックス0を参照してください。これは、非表示のページに関連しています。

<div data-role="page" data-url="list&amp;ui-page=newsListContent-0" data-theme="d" data-count-theme="c" tabindex="0" class="ui-page ui-body-d">
    <div data-role="header" data-theme="b" class="ui-header ui-bar-b"
        role="banner">
        <div class="ui-title">FOOD</div>
    </div>
    <div data-role="content" class="ui-content" role="main">
        <ul data-role="listview" data-inset="true" data-theme="d"
            data-dividertheme="a"
            class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
            <li data-icon="false" data-theme="a"
                class="ui-li ui-li-static ui-body-a ui-corner-top">FOOD ITEM 1</li>
            <li data-icon="false" data-theme="a"
                class="ui-li ui-li-static ui-body-a">FOOD ITEM 2</li>
            <li data-icon="false" data-theme="a"
                class="ui-li ui-li-static ui-body-a ui-corner-bottom">FOOD
                ITEM 3</li>
        </ul>
    </div>
</div>

同じインデックス0を使用します。新しいli要素を追加しても、現在のliインデックスは変更されず、すでに使用されている0インデックスが複製されます。

これが新しいli要素です（hrefはfood li要素も指します）

<a class="ui-link ui-link-inherit" href="#list&amp;ui-page=newsListContent-0">NEW ITEM</a>

新しい非表示のページは次のとおりです。

<div data-role="page" data-url="list&amp;ui-page=newsListContent-0" data-theme="h" data-count-theme="c" tabindex="0" class="ui-page ui-body-h">
    <div data-role="header" data-theme="b" class="ui-header ui-bar-b"
        role="banner">
        <div class="ui-title">NEW ITEM</div>
    </div>
    <div data-role="content" class="ui-content" role="main">
        <ul data-role="listview" data-inset="true" data-theme="h"
            data-dividertheme="a"
            class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
            <li data-icon="false" data-theme="b"
                class="ui-btn ui-btn-up-b ui-btn-icon-right ui-li ui-corner-top"><div
                    class="ui-btn-inner ui-li ui-corner-top">
                    <div class="ui-btn-text">
                        <a class="ui-link-inherit">NEW ITEM 1</a>
                    </div>
                </div></li>
            <li data-icon="false" data-theme="b"
                class="ui-btn ui-btn-up-b ui-btn-icon-right ui-li ui-corner-bottom"><div
                    class="ui-btn-inner ui-li">
                    <div class="ui-btn-text">
                        <a class="ui-link-inherit">NEW ITEM 2</a>
                    </div>
                </div></li>
        </ul>
    </div>
</div>

最新バージョンに更新しても、それでも問題が発生します。

jQMで新しい問題を作成しました：

これは以前は問題だったようですが、li要素を動的に追加しているため、新しい問題を作成しました

于 2012-09-27T12:32:53.180 に答える