Переключение абсолютного DIV не работает после первого раза

Question

$('.pallete').hide(); 
$(document).delegate('.pick', 'click', function() { 
    var pos = $(this).offset(); 
    var x = pos.left - $(window).scrollLeft() + $(this).width(); 
    var y = pos.top - $(window).scrollTop() + $(this).height(); 
    $('.pallete').css({ 
    top: y + "px", 
    left: x + "px", 
    }).show(); 
}); 

$(document).delegate('.col', 'click', function() { 
    var pos = $(this).css('background-color'); 
    $('.pick').css('background-color', pos); 
    $(this).parents('div').fadeOut(); 
}); 

Вот скрипка, http://jsfiddle.net/zPNk3/5/. Проблема заключается в том, что когда я нажимаю первый раз на элементе .pick, элемент '.palette' отображается правильно. Но когда я нажимаю в следующий раз то же самое не работает.

Answer 1

Когда вы делаете $(this).parents('div').fadeOut(), вы исчезаете все<div> родителей элемента. Вы показываете только .pallete.

Try:

$(this).closest('.pallete').fadeOut(); 

It works!

Answer 2

Посмотрите на строку DIV, который не должен быть скрыт,

$(document).delegate('.col', 'click', function() { 
    var pos = $(this).css('background-color'); 
    $('.pick').css('background-color', pos); 
    //$(this).parents('div').fadeOut(); // this is wrong 
    $(this).parent().parent().fadeOut(); // fixed 
});