jQueryモバイルで動的コンテンツを追加するときの適切な書式設定

jQuery Mobileの折りたたみ可能な項目<li>のチェックボックスのリストにコンテンツを動的に追加しようとしています。素敵な丸いコーナーとグループ化されたアイテムで適切な書式設定ができません。葉レベルで他の要素を追加すると、さらに悪化します。jQueryモバイルで動的コンテンツを追加するときの適切な書式設定

Hereは、（明らかにヘッダにjQueryとjquerymobileスクリプトやCSSを追加）問題を示した例です。

<body> 
<div data-role="page" id="page"> 
    <ul id="listList" data-role="listview"> 
    <li id="list1" data-role="collapsible"> 
    <h3>list 1</h3> 
    <div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup" id="fs1"> 
     <input type="checkbox" id="cb1" /><label for="cb1">text</label></fieldset></div></li> 
    <li id="list2" data-role="collapsible"> 
    <h3>list 2</h3> 
    <p>here comes another list of checkboxes...</p></li></ul> 
<input type="button" onclick="addCheckbox();" value="add a checkbox to list1" /></div> 
</body> 
<script> 
function addCheckbox() { 
    $("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>'); 
} 
</script>

私はappend()に呼び出した後.page()を追加しようとしたが、それはしかし、正しく動作しませんでした少し良く。

私の例以外にも、jQuery MobileがDOM構造を使いこなした後に、DOMツリーにコンテンツを動的に追加する方法が一般的な質問です。私は、木の一部を「ジャケーロモライズ」する機能があると信じていますが、私はそれを見つけることができません。

ありがとうございました！

EDIT：要約すると、の1つの<li>要素に要素を動的に追加しようとしており、要素をリスト自体に追加しようとしていません。 listviewをリフレッシュしても、ここでは役に立たないようです。

EDIT 2：私は.append()（CF JQM FAQ）に連鎖させることができます.trigger("create")機能を発見したとして、私は少し近づいています。以下のスクリプトでは、data-role="controlgroup"は素敵な丸いボックスで正しいフォーマットを提供していませんが、少し上手く機能します。

$("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>').trigger("create");

ある時点で完全な回答を投稿します。

EDIT 3：ここで私は従うjsFiddle

出典

2012-02-26 Mad Echet

PS：私の例ではチェックボックスが無効になっていて折りたたみ可能なアイテムがデフォルトで折りたたまれていないのも不思議ですが、これはセカンダリです。 –

のいずれかが、私が得たものです試してみてください。

動的jQueryのモバイルに要素を追加する（参照を.trigger("create")を使用jQuery Mobile FAQ）
は、折りたたみ可能な要素の折りたたみ可能な部分にそれらを追加する
がグループ化されたの素敵なレンダリングを取得するので、あなたが直接そこにコンテンツを追加しdiv.ui-collapsible-contentにそれを追加したり、折りたたみ可能な部分事前内divコンテナを作成チェックボックスは、あなたは私が必要なものをないように、ここで私の最後のスクリプトである私が順次

それらを追加したとき、私はなめらかな丸みを帯びた角を得ることができませんでした（一度にすべてのチェックボックスを追加する必要があります

$("#list1 div[data-role='fieldcontain']").append('<fieldset data-role="controlgroup">' 
    +'<input type="checkbox" id="cb1" /><label for="cb1">text</label>' 
    +'<input type="checkbox" id="cb2" /><label for="cb2">More text</label></fieldset>' 
    +'<a href="index.html" data-role="button" data-icon="delete">Delete</a>') 
    .trigger("create");

私はそれが助けてくれることを願っています！

出典

2012-02-27 09:41:54

ここに私の動作例はhttp://jsfiddle.net/hbbvMです –

に示す非常にわからない私の例です。あなたは、適切なスタイルを適用する方法をもっと探していますか？この場合は、次のものを使用する必要があります。

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

これは、あなたのリストに新しいアイテムを追加した後です。

出典

2012-02-27 02:11:41 imaginethepoet

ありがとうございますが、問題はjquery mobileが一連のコンテナを作成し、ページがロードされたときに要素を再構成することです。新しいjquery要素（この場合は入力チェックボックスとそのラベル）を動的に追加すると、再構成が行われないため、醜いプレゼンテーションが発生します。リフレッシュはリストビューで機能しますが、私の例では入力チェックボックスから問題が発生しますが、リストにアイテムを追加するのではなく、リスト内の1つのアイテムの折りたたみ可能な部分にアイテムを追加します。 –

この問題は、動的コンテンツをlistviewに追加した後、jqueryモバイルクラスがリストビューに適用されないことがあるためです。私は、私はので、ここで自分の質問に答えることができると思い、次の

$('#listList').listview('refresh'); //which refresh your list view 
$('#listList').listview('refresh',true); //which rebuilds the listview with your new content

出典

2012-02-27 04:01:45

ありがとう、私は別のコメントで説明しようとしたので、私はリストビューに要素を追加するのではなく、divの要素の折りたたみ可能な部分に項目を追加します。リストビューを更新することは、ここでは何の助けにもならないようです。 –

@Mad Echet：あなたのonclickイベントは "addCheckbox（）"という関数で発生していないと思います。あなたの関数コードの最初の行にアラートを置くことでこれをチェックできますか？ここであなたの例を確認することができます[link] http://jsfiddle.net/reddyprasad321/wECQx/5/ –

見ていただきありがとうございます、なぜあなたの例でイベントが発砲していないのか（私はjsfiddleには慣れていない）が発砲していないことがわかっています（テキストは正しく追加されましたが、フォーマットはありませんでした）。私はjsfiddleで実用的な例を投稿しようとしますが、私の答えで私の解決策を見つけることができます。 –

jQueryモバイルで動的コンテンツを追加するときの適切な書式設定

答えて

関連する問題