0

.on()私は、jQuery バージョン 1.7.x 以降で提供されている比較的新しい (少なくとも私にとっては) メソッドを理解しようとしています。これまでイベント ハンドラーを処理するためにコードで使用してきましたが、パフォーマンスの問題があるように思われるlive(), bind()ため、オーバーホールを考えています。ここに私の問題があります。これは私のページにあるページ構造です:.live()

    <div id="header"></div>
    <div id="content"></div>
    <div id="footer">
        <div id="default"></div>
        <div class="close">Close</div>
        <div id="extras">//some random stuff// </div> 
    </div>

次のように、頻繁に使用されるセレクターを格納するオブジェクトを作成しました$(document), $("#header"), $("#footer")。

   var elements = {
        $doc: $(document),
        $foo: $("#footer"),
        $head: $("#header")
   };

.close内部のクリックから期待される動作は、ビューから非表示#footerにする必要があります。次のように（delegated#extras ）のクリックイベントをバインドしようとしました：.close#footer

elements.$foo.on("click","div.close",hideFooter)

うまくいきませんでした。しかし、このようにバインドされている場合elements.$doc:

elements.$doc.on("click", "div.close", hideFooter);

それは動作します。しかし、これはどのように.live()機能するのでしょうか？（クリックするたびにDOMの開始に移動し、にバブルダウンする必要がある場合div.close）

ここで何か間違ったことをしていますか？

追加情報 無名関数の内容は次のhideFooterとおりです。

    function hideFooter(event) {
        $(event.currentTarget).next().hide("slow")
                              .closest("#footer").css({ "opacity": "0.8" });
        $("#default").show();
    }

default.js のコード シーケンス

    var elements = {
            $doc: $(document),
            $foo: $("#footer"),
            $head: $("#header")
       };

  elements.$doc
       .ready(function () {
         elements.$foo.on(events.click, "div.close", hideFooter);
       })
      .on(events.click, "#content", HideHeaderFooter)
      .on(events.hover, "#footer", showFooter);
4

3 に答える 3

3

footerスクリプトを実行する前に要素が確実に読み込まれるようにするには、スクリプトをページの下部に配置します。

<body>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer">
        <div id="default"></div>
        <div class="close">Close</div>
        <div id="extras">//some random stuff// </div> 
    </div>

    <script src="/default.js" type="text/javascript"></script>

</body>

または、ページの中に入れたい場合<script>は<head>、コードを jQuery.ready()ハンドラーでラップして、ページが読み込まれるまで実行されないようにすることができます。

$(function() {
       // Code in here will not run until the rest of the page has loaded.
    var elements = {
            $doc: $(document),
            $foo: $("#footer"),
            $head: $("#header")
       };

    elements.$doc
      .on(events.click, "#content", HideHeaderFooter)
      .on(events.hover, "#footer", showFooter);
    elements.$foo.on("click","div.close",hideFooter);
});

したがって、ページが読み込まれるまでコードが遅延されるため、footer要素が存在し、DOM 選択の準備が整います。

于 2012-10-24T17:28:56.890 に答える
1

ハンドラーにまとめてみませんか？これはうまくいくはずです：

elements.$foo.on("click","div.close", function() {
     $(this).next().hide("slow").closest("#footer").css({ "opacity": "0.8" });
});
于 2012-10-24T17:36:11.697 に答える
0

あなたはこれを持っています

elements.$foo.on("click","div.close",HideFooter)

これのことですか？

elements.$foo.on("click","div.close",hideFooter)

関数名の「H」に注目してください。

于 2012-10-24T17:10:51.183 に答える