親の中から何かをクリックしたときに親からクラスを削除する

Question

探している正確なシナリオが見つかりませんでした。 閉じるボタンの代わりに、親divからクラスを切り替えることを試みています。ちょうどあなたに明確な考えを与えるために、私はコード全体を投稿しています。

$('.team__list li').on('click', function() { 
     $('.team__list li').removeClass('active'); 
     $(this).addClass('active'); 
     console.log('hi'); 
    }); 

    $('.team__list li .close-button').click(function(event) { 
     $(this).closest('.team__list li').removeClass('active'); 
     event.stopPropagation(); 
    }); 

    $('.active *').on('click',function(event) { 
     console.log('hi'); 
     $(this).closest('.team__list li').removeClass('active'); 
     event.stopPropagation(); 
    }); 

最初のブロック要素がクリックされたアクティブなクラスをトリガし、兄弟から削除は、第二は、正しくボタンを閉じる時にクラスを削除します。しかし、私は3つ目のブロックを一斉に発射することはできません。

クラスアクティブを受け取ると、子要素（子要素を持つ）がアクティブ要素の上に絶対配置されることに注意してください（重要であるかどうかはわかりません）。

編集：

$('.team__list li').not('.active').on('click', function(event) { 
     $('.team__list li').removeClass('active'); 
     $(this).addClass('active'); 
     console.log('open'); 
     event.stopPropagation(); 
    }); 



    $('.team__list li .close-button').click(function(event) { 
     $(this).closest('.team__list li').removeClass('active'); 
     event.stopPropagation(); 
    }); 

    $(".team__list").on('click', ".active *", function(event) { 
     console.log('close'); 
     $(this).closest('.team__list li').removeClass('active'); 
     event.stopPropagation(); 
    }); 

Answer 1

あなたは実行時にclassの追加と削除されているので、あなたがあなたのイベントをバインドするためにevent-delegationを使用する必要があります。ページのロード中に登録されたイベントは、実行時にそのイベントに適格とされるエレメントには適用されないためです。

$(".team__list").on('click', ".active *", function(event) { 
    //your code goes here.