1

送信イベント（またはクリックなど）をjQueryモバイルページ内の要素にバインドしようとしました。私がやりたかったのは、jQueryページ内のフォーム要素内の入力から値を取得し、それをcookies/localStorageに保存することです。このページに戻るたびに、入力フィールドを復元したいと思います。

現在、私はこのスクリプトを使用することになりました。

    $('.pageClassSelector').live('pageinit', function (e) {

        $('.classSelector').submit(function () {
            var q = $('.inputClassSelector').val();
            // store to localStorage ...
        });

    // load from localStorage ...
    $('.q').val(lastSearchString);

    });

このアプローチは、http：//jquerymobile.com/test/docs/api/events.htmlに記載されています。

DOMに同じページが保持されている可能性があるため、IDセレクターはあまり役に立ちません。私の問題は、このページに移動するたびに、送信イベントが再度バインドされるため、結果としてDIFFERENT（！）値が保存されることです。送信イベントは複数回発生しているようで、最後までの値ではるかに興味深いものになっています。

私は完全に間違ったことをしていますか？jquery mobileでスクリプトを適切に実行するためのヒントはありますか？

TRY1：

次に、submitイベントバインディングをpagebeforeshowイベント内に次のように配置しました。

$('#PageId').on('pagebeforeshow', function (e) {
    $('.classSelector').on('submit', function () {
            var q = $('.q').val();
            alert('stored: ' + q);         
    }
    $('.q').val(lastSearchString);
}

ただし、保存される値は、前にページをナビゲートしていたときの前回の値のままです。初めて正常に動作します。

TRY2：

これは私が今持っているものであり、それは私が望むことをしているように見えます。ここで現在のページを選択し、このページの子であるフォームのみを選択します。これは良い習慣ですか？

$('div:jqmData(id="PageId")').on('pagebeforeshow', function (e) {

     $(this).find('#form').on('submit', function () {
        var q = $(this).find('#input').val();
        localStorage.setItem("key", q);
        return true;
    });

    lastSearchString = localStorage.getItem("key");
    $(this).find('#input').val(lastSearchString);        
});
4

3 に答える 3

1

ページをナビゲートするときに発生する複数のイベントは、私には複数のバインディングのように聞こえます。これは、jQueryMobileの既知の問題です。すべてがAJAXを介してロードされるため、ページをナビゲートするときにバインディングがアンバインドされません。たとえば、このStackOverflowの質問を参照してください：Jquery mobile .clickは、新しいページへのアクセスまたは私のソリューションで複数回起動します。

于 2012-10-03T08:37:09.577 に答える
1

ローカルストレージからロードしてページに保存するための要件は、現在行っているようなpageinitイベントではなく、pagebeforeshowイベント（「ページ遷移イベント」のセクションを参照）にバインドすることによって行う必要があります。

$('.pageClassSelector').on('pagebeforeshow', function (e) {
    // load from localStorage ...
    $('.q').val(lastSearchString);
});

さらに、通常、各ページ要素（data-role ='page'がある場合）には一意のIDが必要であるため、CSSセレクターの代わりにそれを使用できます。

于 2012-10-03T08:38:29.987 に答える
0 
$('.classSelector').on('submit', function(){})

 Try to use the constraction to bind your event to element.
 Look likes some data was loaded through ajax request
于 2012-10-03T08:17:14.173 に答える