2

検索アイコンがクリックされたかどうかに基づいて検索バーを切り替えるには、HTML ページに次のマークアップを追加します。

<a id="searchIcon" href="/"></a> 

<div id="searchWrapOuter" style="display:none;">
    <div id="searchWrapInner">
        <div id="formContainer">
            <form id="searchForm" action="#">
                <div>
                    <input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
                </div>
            </form>
        </div>
    </div>
</div>

次の javascipt/jquery の幅:

 $(function() {
        $(document).on("click", "#searchIcon", function () {
            var searchWrapper = $("#searchWrapOuter");
            $(searchWrapper).slideToggle();
            return false;
        });
});

このコードは、URL から直接ページをロードすると、期待どおりに機能します。Ajax がロードされたリンクからページに入ると、ページのコンテンツが DOM にロードされ、DOM Ready ハンドラーは最初のページに対してのみ実行されます。

の使用について読みました

$(document).on('pageinit')、$(document).ready()/$(function()ではありません

ただし、ajax リンクから外れた場合は、まだこれを機能させることができませんでした。これらのイベントを実装して、コードを Ajax リンクから動作させるにはどうすればよいでしょうか?

ありがとう、

4

3 に答える 3

3

ほとんどの場合、クラスの代わりに ID を使用していることが原因です。jQuery Mobile は、ページを DOM にキャッシュするため、ID ではうまく機能しません。そのため、ページを開いて閉じてからページに戻ると、ページが DOM 内に 2 回表示される可能性があります (1 つは表示、もう 1 つは非表示/キャッシュ)。 ）。その$("#searchWrapOuter")ため、実際にどの要素を扱っているのかわかりません (あなたの場合は、おそらく非表示の要素です)。

解決策は、ID をクラスに変更することです。これはあまり直感的ではありませんが、jQuery Mobile を操作する最良の方法であることがわかりました。

また、あなたに関連する可能性のあるドキュメントのこのコメントにも注意してください。

すべての要素の id 属性は、特定のページで一意であるだけでなく、サイト内のページ全体で一意である必要があります。これは、jQuery Mobile の単一ページ ナビゲーション モデルにより、多数の異なる「ページ」を同時に DOM に存在させることができるためです。これは、テンプレートのすべての「ページ」が一度に読み込まれるため、複数ページのテンプレートを使用する場合にも当てはまります。

http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html

于 2013-01-14T09:53:05.803 に答える
0

遅延時間を 500 ミリ秒と 1 秒に手動で調整できます。

$(searchWrapper).delay(1000).slideToggle();
于 2013-01-14T09:58:03.730 に答える
0

私の問題は、ページ ID がページ タグの下にあったことです。したがって、ページ div をその上に移動すると、javascript が ajax ページの読み込みに含まれていました。この前に

于 2019-11-26T21:53:36.087 に答える