web-dev-qa-db-ja.com

jquery mobileで<li />に<li />を動的に追加する

Jquery mobileでリストアイテムを番号なしリストに追加しようとしていますが、フォーマットが正しく作成されていないようです。

<ul data-role="listview" data-theme="c" data-dividertheme="b">
                    <li data-role="list-divider">
                        Title Divider
                    </li>
                    <li>
                        <a href="test.html" data-transition="slide">List item 1</a>
                    </li>

 </ul>

スクリプト：

$('ul').append('<li><a>hello</a></li>');

何らかの理由で、動的に生成されたliは、静的に作成されたliと同じ方法で表示されません。なぜ誰がそれを同じにすることができるか知っていますか？

jqueryhtml5jquery-mobile
40
locoboy

これを試して：

$('ul').append($('<li/>', {    //here appending `<li>`
    'data-role': "list-divider"
}).append($('<a/>', {    //here appending `<a>` into `<li>`
    'href': 'test.html',
    'data-transition': 'slide',
    'text': 'hello'
})));

$('ul').listview('refresh');
87
thecodeparadox

提供された答えは少し厄介であることが判明しました...

$('ul').append('<li><a>hello</a></li>');は問題ありませんが、リストビューを更新する必要があるため、必要なものは次のとおりです。

$('ul').append('<li><a>hello</a></li>').listview('refresh');
45
naugtur

また、ULの属性を変更する場合は、囲むdivに対して.trigger（ 'create'）を呼び出す必要がある場合があります。これにより、プロパティがリセットされた状態でULが再度作成されます。

2
Sandeep Taneja

<a>タグはWebページを参照していません。

試してください：

$（ 'ul'）。append（ '<li> <a href="test2.html' data-transition="slide" />リストアイテム2 </ li>'）;
0
Cyber Slueth Omega

リストタグにクラスを追加する必要があります

$('<ul>').append( $('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('hello'))  ;

JQueryモバイルは、リスト項目にクラスを自動的に追加します。これは、Firefoxでページを実行し、firebugを使用してデバッグすると表示されます。適用されたクラスを選択し、動的に生成されたliタグに追加します。

0
thebugger