0

折りたたみ可能な div に動的コンテンツを追加しています。追加すると、div は折りたたまれますが、追加されたコンテンツは div の外にあります。Chrome で JavaScript コンソールを使用すると、新しいコンテンツが追加される前に div が閉じられていることがわかります。コードは次のとおりです。

<div data-role="collapsible" id="sendmessTMlist" data-collapsed="true">
        <h3>Select A Message</h3>
                <div data-role="collapsible" id="mymessages">
                <h3>My Messages</h3>
                <div data-role="content">My Message1<BR>
                <input data-inline="true" data-role="button" id="messageid" type="button" value="Insert" class="buttlink" />
                </div>
                </cfoutput>
           </div>

コンテンツを追加するために使用するjqueryコードは次のとおりです。

$("#mymessages").append('<div data-role="content">'+data.message+'<BR><input data-inline="true" data-role="button" id="'+data.message+'" type="button" value="Insert" class="buttlink" /></div>').trigger("create");

$("Selector").find('div[data-role=collapsible]').collapsible();

コードのさまざまな組み合わせを試しましたが、上記は最後のパスの残りです。

それを折りたたみ式の中に入れるために私のjavascriptに欠けているものは何ですか?

4

3 に答える 3

3

要するに、問題は、コンテンツを正しいコンテナの外に追加することです。

問題は、jQM がマークアップを拡張する過程で、コンテンツが配置されるdivクラスで を挿入することです。ui-collapsible-content

この初期マークアップがあるとすれば

<div data-role="collapsible" id="mymessages" data-collapsed="false" data-theme="c" data-content-theme="c">
    <h3>My Messages</h3>
</div>

jQM が強化された後は、そのように見えます。 

<div data-role="collapsible" id="mymessages" data-collapsed="false" data-theme="c" data-content-theme="c" class="ui-collapsible ui-collapsible-inset">
    <h3 class="ui-collapsible-heading">
    <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-up-c ui-fullsize ui-btn-icon-left ui-corner-top" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="c" data-mini="false"><span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">My Messages<span class="ui-collapsible-heading-status"> click to collapse contents</span></span><span class="ui-icon ui-icon-shadow ui-icon-minus">&nbsp;</span></span></a>
    </h3>
    <div class="ui-collapsible-content ui-body-c ui-corner-bottom" aria-hidden="false">
    </div>
</div>

新しく追加されたことがわかりdivますか？

そうは言っても、次のようにコンテンツを追加して更新する必要があります。

$("#mymessages div.ui-collapsible-content").append(html);
$("#mymessages").trigger("create");

ここでjsFiddleが動作します。

はい、提供されたマークアップにタイプミスがあります。 </div>* の代わりに *が必要</cfoutput>です。

于 2013-02-10T05:46:01.967 に答える
0

<BR>それを引き起こしているのは、動的に追加されているメッセージの後のタグである可能性があります。また、終了タグ</cfoutput>が少しずれているように見えます。

于 2013-02-10T05:37:41.110 に答える