0

重複の可能性：
HTMLをjquery mobileに動的に追加した後、セクションを更新します

jQueryMobileページに動的リストを挿入しようとしています。

メインページに、「list」というHTMLul要素があります。<ul id='list' data-role='listview'> </ul>

すべてのリスト要素にはグリッド（class="ui-grid-a"）が含まれています。グリッドの最初のdivには、各要素（div class="ui-block-a"）にh2の説明が含まれ、2番目のdivには、コントロールグループ（）に水平に配置された3つのボタンが含まれますdiv class="ui-block-b" data-role="controlgroup" data-type="horizontal"。

要素が静的ページにある場合、ボタンは完全にレンダリングされますが、ページに動的に挿入しようとすると、ボタンは正しくレンダリングされません。以下に私のコードがあります（ここにjsfiddle ）。私は何が欠けていますか？

DOMElement += '<li>';
        for (i = 0 ; i < length ; i++) {
            if (typeof systemArray[i] !== 'undefined') {
                DOMElement += '<fieldset class="ui-grid-a"> <div class="ui-block-a" style="width:60%;"> <h2 id="'
                DOMElement += "system" + systemArray[i].name;
                DOMElement += '">';
                DOMElement += systemArray[i].name;
                DOMElement += '</h2>';
                DOMElement += '</div>';
                DOMElement += '<div class="ui-block-b" data-role="controlgroup" data-type="horizontal" style="width:30%;">';
                DOMElement += '<a href="#" class="deletebutton" data-icon="delete" data-role="button" id="';
                DOMElement += 'delete|' + systemArray[i].name;
                DOMElement += '" data-iconpos="notext">Cancel</a>';
                DOMElement += '<a href="#" class="modifybutton" data-icon="gear" data-role="button" id="';
                DOMElement += 'modify|' + systemArray[i].name;
                DOMElement += '" data-iconpos="notext">Modify</a>';
                DOMElement += '<a href="#" class="connectbutton" data-icon="arrow-r" data-role="button" id="';
                DOMElement += 'connect|' + systemArray[i].name;
                DOMElement += '" data-iconpos="notext">Connect</a>';
                DOMElement += '</div>'
                DOMElement += '</fieldset>';
            }   

        }
        DOMElement += '</li>';

        // Needs trigger ('create') to create the icons http://jquerymobiledictionary.pl/faq.html
        $("#list").html(DOMElement).trigger('create');
        $("#list").listview("refresh");
4

3 に答える 3

1

あなたのフィドルをチェックすると、問題はコントロールグループのボタンがそれ自体にスタックしていることであることがわかります。この問題は、cssを使用して回避できます。

.ui-block-b a{
    margin-left:6px !important;
}

フィドル：

フィドル

jqmがこれを行う理由がわかりません。これは開発時によく発生し、ヘッダーにスタック15pxがリストされることがあります。ただし、cssの回避策は難しくなく、正常に機能します。すべてのui-block-bにそのマージンを持たせたくない場合は、ボタンに追加のクラスを簡単に追加して、それにcssを追加できます。

IMOは、これを処理するための最良の方法は、すべてのjqmの癖を含む個別の特定のcssスタイルシートを作成することです。これにより、それらを簡単に処理および視覚化できます。

于 2012-07-04T15:40:00.873 に答える
1

交換：

DOMElement += '" data-iconpos="notext">.....</a>';

と：

DOMElement += '" data-iconpos="notext">.....</a>\n';
于 2012-07-04T16:09:16.610 に答える
0

リンクからdata-role=button属性を削除します。あなたがそれを持っているとき、あなたは衝突を引き起こしている互いの上に2つのウィジェットを初期化しようとしています。

于 2012-07-04T14:58:36.423 に答える