javascript - 初回以降、絶対 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

試す：

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

できます！

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
});