jQuery: .addClass() veya .attr() tarafından sınıf değiştirildikten sonra sınıfa göre seçilmesi

Question

Bazı jQuery kodlarımda şöyle bir şey var:

$(document).ready(function() { 
    $("img.off").click(function() { 
     alert('on'); 
     $(this).attr('class', 'on'); 
    }); 
    $("img.on").click(function() { 
     alert('off'); 
     $(this).attr('class', 'off'); 
    }); 
}); 

Seçici, orijinal HTML belgesinde tanımlanmış sınıf ismine sahip görüntüler için iyi çalışır, ancak jQuery ile sınıf adını değiştirdikten sonra, img öğesi yanıt vermez yeni sınıf kullanarak seçicilere.

Diğer bir deyişle, yukarıdaki kodu çalıştırarak, 'off' img 'i tıklarsanız, ilk işlevi tetikler ve sınıfı' on 'olarak değiştirir. Ancak, bu görüntüyü tekrar tıklamak, ikinci işlevi tetiklemez (beklediğim gibi), ancak bir kez daha ilkini tetikler. Seçici, güncellenmiş versiyondan ziyade eski DOM'yi okuyormuş gibi. Burada neyi yanlış yapıyorum?

Firefox 3.6.3 - jQuery 1.4.2

Answer 1

Böyle, ne istediğinizi yapmak .live() kullanabilirsiniz:

$(function() { 
    $("img.off").live('click', function() { 
    alert('on'); 
    $(this).attr('class', 'on'); 
    }); 
    $("img.on").live('click', function() { 
    alert('off'); 
    $(this).attr('class', 'off'); 
    }); 
}); 

Eğer $(selector).click() yaptığınızda size uyan unsurları buluyoruz o anda ve bir işleyiciyi click etkinliğine bağlayarak ... sınıfları daha sonra değiştiği zaman bunun için önemli değil, işleyici eklenir. .live(), olay meydana geldiğinde seçiciyle ilgili bakım konusunda farklı çalışır.

Ayrıca, örneğin bağlı/sen sonuçta peşinde olduğun, .toggleClass() gibi bir şey bu gibi sizin için basitleştirmek olabilir:

$(function() { 
    $("img.off, img.on").live('click', function() { 
    $(this).toggleClass('on off'); 
    alert($(this).attr('class')); 
    }); 
}); 

Answer 2

live() ile deneyin:

$(document).ready(function() { 
    $("img.off").live('click', function() { 
     alert('on'); 
     $(this).attr('class', 'on'); 
    }); 
    $("img.on").live('click', function() { 
     alert('off'); 
     $(this).attr('class', 'off'); 
    }); 
}); 

Answer 3

Sınıfı değiştirdikten sonra tıklama geriçağırımını yeniden adlandırmanız veya .live()