Oluşturulan sınıfta çalışmayan 'klik' üzerine jquery

Bir li'ye tıkladığınızda 'this' sınıfını eklemeye çalışıyorum ve '.this' olan bir sınıfa tıkladığınızda çalışmaz.

.On yöntemini kullandığımda bile çalışmıyor. Neyi kaçırıyorum? bu beni deli ediyor.

var thisLi = $('ul li');

$('li').on('click', function() {
    $(thisLi).removeClass('that');
    $(thisLi).removeClass('this');
    $(this).addClass('this');
});


$('li.this').on("click", "li.this", function() {
    $(this).addClass('that');
 });

http://jsfiddle.net/zfda8145/2/

0
Bence li.this'e tıkladığınızda, ilk tıklama işleyicisi 'this' sınıfını kaldıracak ve ikinci li.this tıklama işleyicisi asla çağrılmayacak. Aşağıdaki cevaba bakınız.
katma yazar StephenCollins, kaynak

6 cevap

Use event delegation for that. Because normal event binding will not bind the event to the future elements. For that, you need to bind the events to a particular parent. Here I am using document

$(document).on("click", "li.this", function() {
    $(this).addClass('that');
 });
1
katma
yardımcı olur, ama şimdi bu işlevlerin her ikisi de çalışıyor, $ ('li.this'). on ("click", "li.this", function() {$ (this) .addClass ('that' );}); ve $ (document) .on ("click", "li.this", function() {$ (this) .addClass ('that');}); sınıf olup olmadığını kontrol etmek için bir if ifadesi kullanmalı mıyım?
katma yazar marksy, kaynak

Olay doğrudan ilişkili öğede gerçekleştiğinde işleyici çağrılmaz, ancak yalnızca torunlar için (iç öğeler)

( https://api.jquery.com/on/ )

Bunu değiştirdiğinde işe yarıyor

$('li.this').on("click", "li.this", function() 

buna:

$(document).on("click", "li.this", function()

Bu mantıkta, aslında click olayının gerçekleşebileceği kapsamı belirlersiniz. $ ('li.this'). On() özelliğini kullanırsanız, bu yalnızca li.this torunları için tıklama olaylarını dikkate alır, ancak torunları li.this için var.

0
katma

Bu pasajı hile yapmalı. İlk önce ul öğesini almanız gerekir - ul için DOM dizini aramaktan kaçınmak için. İkincisi, öğelerine tıklayın etkinliğini uyguladınız :)

    var thisLi = $('ul li');
    var list = $('ul');
    list.on('click','li', function() {
        $(thisLi).removeClass('that');
        $(thisLi).removeClass('this');
        $(this).addClass('this');
    });


    list.on('click','li.this', function() {
        $(this).addClass('that');
     });
0
katma

Bunu dene:

    var thisLi = $('ul');

    $('li').on('click', function() {
        $(thisLi).removeClass('that');
        $(thisLi).removeClass('this');
        $(this).addClass('this');
    });


    $(thisLi).on("click","li.this", function() {
        $(this).addClass('that');
     });    

Çalışma DEMO'su

0
katma

Böyle bir şey yapabilirsin:

var thisLi = $('ul li');

$('li').on('click', function() {
    if(this.className!=='this'){
    $(thisLi).removeClass('that');
    $(thisLi).removeClass('this');
    $(this).addClass('this');
    }else{
       $(this).addClass('that');
    }
});  
0
katma

Sanırım sorun şudur: this.li'ye tıkladığınızda, önce sınıfı kaldırarak hem de sınıf gittiğinden sonra çalıştırmayacağınız için her iki işlevi de tetikler.

Ayrı fonksiyonlar yerine sınıf kontrolü yapan bir fonksiyon olarak yazdım. Bundan gerçekten hoşlanmıyorum, ancak sıkışırsanız gitmenize neden olur.

$('li').on('click', function() {    

    if ($(this).hasClass('that')) {
        $(this).removeClass('that');        
    } else if ($(this).hasClass('this')) {
        $(this).addClass('that');
        $(this).removeClass('this');
    } else {
        $(this).addClass('this');
    }

});

And here is a working fiddle - http://jsfiddle.net/zfda8145/24/

0
katma