0

3 つのページ ( ) を持つ jquery モバイル サイトがあります<div data-role = 'page'>。

ページ 1 のヘッダーには、Choose Language コンポーネントに使用されている Select Menu があります。

<div data-role = 'header'> ... <label></><select><options></></> ... </>.

サイト全体で言語選択コンポーネントの複数のインスタンスを使用したくありません。

そのため、 SOからの提案に従って、各ページの pageshow イベントでヘッダーノードをページからページに移動しています。

ページ 2 に移動すると、選択メニューが機能しなくなります。しかし、ページ1に戻ると、再び機能します。

4

1 に答える 1

1

pagecreate はそのページの作成時に一度だけ呼び出されるため、「pagecreate」イベントではなく「pagebeforeshow」を使用します。

したがって、ページを変更するたびにイベントを取得したい場合は、'pagebeforeshow'、'pagebeforehide.'pageshow' または 'pagehide' を使用する必要があります。

ページを表示する前に UI を変更するには、 pagebeforeshowをお勧めします。:)

「選択」を前のページから新しいページに移動するために .remove() API を使用しましたか? . remove() は、親から要素を削除し、そのデータとイベントも削除します。そのため、削除後にイベント ハンドラを再定義する必要があります。

さらに、親から要素を切り離すだけの .detach() 。ただし、jquery mobile の機能強化に関していくつかの問題があります。

上記についてjsfiddleを投稿します。jsfiddle.net/cwdoh/ZaVch

シャノンによる編集...将来フィドルが削除された場合に備えて、コードは次のとおりです。

    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>Page 1</h1>
            <select id="language-select">
                <option>Korean</option>
                <option>English</option>
                <option>JavaScript :)</option>
            </select>
        </div>

        <div data-role="content">
            <a data-role="button" href="#page2">go to Page2</a>
        </div>
    </div>

    <div data-role="page" id="page2">
        <div data-role="header">
            <h1>Page 2</h1>
        </div>

        <div data-role="content">
            <a data-role="button" href="#page1">go to Page1</a>
        </div>
    </div>

$(document).on( "pagebeforeshow", function( e, data ) {
    // move language-select from previous page
    var selectMenu = data.prevPage.find( "#language-select" );

    selectMenu
        .remove()     // remove from previous page
        .appendTo( $(e.target)   // append to active page
            .find( "[data-role='header']" ) );

    // bind event handler after append
    $("#language-select").bind( "change", function() {
        alert( "language-select changed" );
    });

    // re-build 
    selectMenu.selectmenu();
});
于 2013-02-18T00:25:37.620 に答える