web-dev-qa-db-ja.com

HTMLをjquery mobileに動的に追加した後にセクションを更新する

可能性のある複製：
折りたたみ可能な要素の動的な追加

私はこれに関するいくつかの投稿を見てきましたが、それらのどれも実際には当てはまらないようです。本当に変更できないサーバーから送られてくるHTMLがあります。私がやりたいのは、そのHTMLを取得し、それをdiv要素に挿入し、jQuery mobileにスタイリングを行わせることです。私は潜在的に複数回それをする必要があります、そしてそれは痛みが起こるところです。

初めて挿入するとき、それは大丈夫です、jqmは追加をピックアップし、それを完全にスタイルします。 2回目に試すと、jqmはそれをまったく取得しません。コピーして修正する「テンプレート」を作成しようとしたか、静的なHTMLを挿入しただけで機能しませんでした。

以下にテストケースを示します。ご覧のように、[新しいリストを追加]を1回クリックすると問題ありません。もう一度クリックすると、スタイルが設定されていない選択ができます。ライブイベントの使用が機能する可能性があることをどこかで読みましたが、この場合も機能しません。

また、jQuery mobileの選択リストselectmenuメソッドについては知っていますが、返されるアイテムは、単一/複数の選択リスト、ラジオボタンの束、またはフリーテキストフィールドのセットです。ご覧のとおり、一番上の要素でページメソッドを実行しようとしました。追加しようとしている要素でページを実行しようとしましたが、まったく役に立ちませんでした。 :(

テスト：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
    <title>List insert test</title> 
    <meta http-equiv="Pragma" content="no-cache" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <!-- include jQuery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
    <!-- include jQuery Mobile Framework -->
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.css" />
</head> 
<body>
    <div data-role="page" data-theme="b" id="Dashboard">

        <button id='addlist'>add new list</button>
        <button id='addips'>add templated list</button>
        <button id='clearall'>clear</button>
        <div id='theplace'></div>
        <div id='newtemp'>
            <select id='thelisttemplate'>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
        <div id="thelist">
            jkghjkgh
        </div>
    </div>
</body>

<script type="text/javascript">
    $('#addips').live('click', (function() {
        l = $('#thelisttemplate').clone()
        $('#thelist').html('')
        $('#thelist').append($(l))
        $('#thelist').page()

    }))

    $('#addlist').click(function() {
        l = $("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>")
        $('#thelist').html('')
        $('#thelist').append($(l))
        $('#thelist').page()

        //$('#theplace').after($("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>"))
        //$('#thelisttemplate').page()
    })

    $('#clearall').click(function() {
        $('#thelist').html('')
    })
</script>

</html>

更新：以下のnaugurの答えを使用すると、新しいリストの追加機能は次のようになります...

    $('#addlist').click(function() {
        l = $("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>")
        $('#thelist').html('<div data-role="collapsible-set" id="newstuff"></div>');
        $("#newstuff").html(l).page();            
    })

更新＃2：どうやらこれは非推奨になったようです。beta2で修正する方法については以下をご覧ください。

javascriptjqueryjquery-mobile
26
dochead

update

Jquery mobile beta2では、イベントをトリガーします-.trigger('create')

FAQ更新： http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html

これは非推奨です：

.page()関数を使用します。

私は提案します：

  1. 移入するdivを空にします
  2. 内部に新しいdivを作成します
  3. 新しいdivに入力します
  4. その新しいdivで.page()を呼び出します
30
naugtur

私はこれに何時間も苦労しましたが、何も機能していませんでした。別のメニューでオプションが選択されたときにajax呼び出しを介して入力されたカスケード選択メニューがあります。 DOMは更新されていましたが、jQMは新しく追加されたオプションの認識を拒否しました。

最終的に機能したのは（そしてそれが予感に基づいていた-どこにも文書化されていなかった）

$('#controlName').selectmenu('refresh');

JQM 1.0 RC2を使用しています。

4
csigrist