0

ご協力ありがとうございます。このサイトは素晴らしいリソースです。

私の問題: 作業中のサイトでメニューが開かれると、(本体に) div オーバーレイを追加し、クリックしてメニューを閉じてそれ自体を削除できるようにするクラスを与えます。これは、ユーザーが「閉じる」ボタンをクリックするのではなく、メニューの外側の任意の場所をクリックしてメニューを閉じることができるようにするためです。これは簡単に聞こえますが、うまく機能させることができません。

コンテンツを DOM に追加しているため、「バインディング」の問題があることがわかっているので、.click() の代わりに .on() を使用しました。これにより、トリガー イベントを新しく作成した div にバインドできると考えました。私も .bind() を試しましたが、正直なところ、これらの違いを理解していないため、現時点ではコードを推測しているだけです。とても単純に見えるものにプラグインを使用したくないので、経験豊富な皆さん、つまり皆さんにとってすぐに明らかになる簡単なエラーがいくつかあることを願っています。;) これが私の jQuery 関数です。「#the-overlay」をクリックしても何も起こらないことを除いて、すべてが私が望むように機能します。

    $('.the-toggle').on("click", function(){
    $(".the-menu").slideToggle();
    $(".icon-chevron-sign-down").toggleClass("icon-rotate-180");

    if ($('#the-overlay').length) {
        $('#the-overlay').remove();
    }
    else {
        var content = '<div id="the-overlay" class="the-toggle"></div>';
        $('body').prepend(content);

        var docHeight = $(document).height();
        $("#the-overlay").height(docHeight);    
    }
});

私の質問が何らかの形で規則に違反している場合は、ご容赦ください。繰り返しを避けるために答えを探しましたが、見つけたものはすべて、.on() または非推奨の .live() で問題が解決されることを示していました。

ありがとうございました。

4

2 に答える 2

1

委任構文を使用します。

$(document.body).on("click",'.the-toggle', function(){...});
于 2013-07-08T11:55:05.430 に答える