第一次切换绝对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();

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