2016-03-22 27 views
2

Tam olarak aradığım senaryoyu bulamadım. Kapanış düğmesine alternatif olarak bir ana divandan bir sınıfı kapatmaya çalışıyorum. Sadece size net bir fikir vermek için, tüm kodu gönderiyorum.İçinde herhangi bir şeyi tıklatırken sınıftan bir sınıfı silme

$('.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(); 
    }); 

ilk blok elemanı tıklandığında aktif sınıfını tetikler ve kardeş kaldırır, ikinci doğru renkli kapatılması üzerine sınıfı kaldırır. Ancak, üçüncü bloğu hiç ateş edemiyorum. Sınıfı aktif aldıktan sonra, bir alt öğenin (çocukların kendisi ile birlikte) aktif elemanın üzerine tam olarak yerleştirildiği not edilmelidir (önemlidir).

Düzenleme:

$('.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(); 
    }); 

cevap

1

ekleme ve çalışma sırasında class çıkarmadan olduğundan, etkinliklerinizi bağlamak için event-delegation kullanmak zorunda. Sayfa yükleme sırasında kaydedilen olaylar, çalışma süresi boyunca o etkinlik için uygun olan öğelere uygulanamaz.

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

Bu yardımcıdır! İzole, olay patlar ancak tüm kod hala ihtiyacım olduğu gibi değişmez. Soruyu mevcut kodu yansıttım. – Leoland

+0

@Leoland Ne söylediğinizi anlayamıyorum. Biraz daha açıklayabilir misin? –

+0

Tabii ki. Bu yüzden ekip üyeleri bir ızgara var. Bunlardan birine tıklandığında 'etkin' olurlar ve çocukları (bu üyeyle ilgili tam bilgi içeren model) görünür olur ve kesinlikle takım üyesinin üzerine yerleştirilir. problemi, açılış tıklandığında yayılımı durdurmazsam öyle görünüyor. otomatik olarak kapanır. ama eğer durursam. kapanış senaryosunu asla ateş edemem. – Leoland

İlgili konular