1

どこでも検索しましたが、この質問に対する答えが見つかりませんでした。

div 内にいくつかの div を含むメニューを作成しました。

<nav id="menu">
   <span>Open Menu</span>

   <div class="dropdownContain">
       <div class="dropOut">
          ...
          ...
          <div id="logout_wrap">
             <a id="logout">

そして、「#menu」をクリックするとメニューが表示（トグル）され、本体をクリックするとメニューが消えるようにJQueryを使ったスクリプト。この機能のために、stopPropagation() メソッドを使用して #dropDownContain が「本体」の hide() 関数を実行するのを停止する必要がありました

$(document).ready(function () {

    $('#menu').click(function (e) {
        e.stopPropagation();
        $('.dropdownContain').toggle();
    });

    $(document).click(function (e) {
        $('.dropdownContain').hide();
    });

    $('.dropdownContain').click(function (e) {
        e.stopPropagation();
    });

また、「#dropdownContain」(メニューの本体) 内にある「#logout」のクリック イベントを作成して、someThing() 関数を実行しました。

jQuery('body').on('click', '#logout', function () {
    alert("THIS DOES NOT WORK");
});

問題は、親で呼び出される stopPropagation() メソッドが原因で、 "#logout" に割り当てられた関数が起動しないことです (またはそう思います)。

このコードの html + js へのリンクは次の とおりです。

メニューポップアップを説明どおりに機能させたまま、これを修正する解決策はありますか?

4

2 に答える 2

2

イベント委任を使用する理由がない限り、クリックをログアウトリンクに直接バインドできます。

jQuery('#logout').on('click', function () {
    alert("this works");
});

使用していた委任バージョンは、イベントが要素に戻ったときにのみ発生しbodyます（伝播を停止しているため、発生しません）。

于 2013-03-20T17:55:24.100 に答える
1

stopPropagation の使用を停止し、クリックが内側にある#menuかどうかを手動で確認します。

$('#menu').on('click', function() {
    $('.dropdownContain').toggle();
});

$(document).on('click', function(e) {
    if (! $(e.target).is('#menu') || $(e.target).closest('#menu').length )
        $('.dropdownContain').hide();
});
于 2013-03-20T17:58:18.557 に答える