jQuery динамически добавляет кнопки закрытия на элементах

Question

Я пытаюсь добавить необычные кнопки закрытия динамически к элементам HTML

код:

function add_close_box(element,img_close_box,base_url_close_box){

   var i;
    $.each($('.'+element),function(i){

     $(this).addClass('close_box'+i);
     var x = $('.close_box'+i).offset().left;
     var y = $('.close_box'+i).offset().top;

    $('body').append('<a href="javascript:void(0)" class="img_close_box_'+i+'"><img src="'+base_url_close_box+img_close_box+'"></a>');
    $('.img_close_box_'+i).css({'position':'absolute','top':y-10,'left':x+$('.close_box'+i).width()-20});
    $('.img_close_box_'+i).live('click',function(){

    var hei = $('.'+element).height();
    $('.img_close_box_'+i+','+'.close_box'+i).hide();
   $.each('.'+element,function(e){ 
       $('.img_close_box_'+(e)).animate({
          'top':'-='+hei
       },0);
   });



  });
    });


}

это работает хорошо, но когда нажимаешь на кнопку и элемент fadeOut (), другие кнопки закрытияне следует своему собственному связанному элементу из-за абсолютной позиции, они остаются в тех же позициях, в то время как элементы прокручиваются вверх (первый элемент fadeOut, следующий элемент прокручивается вверх и кнопка закрытия остается в той же позиции)

я хотел бы, чтобы кнопки закрытия моглиследуйте их связанному элементу.

Также заставьте меня лениться, я хотел бы знать, если кто-нибудь знает какой-нибудь хороший плагин jquery, чтобы делать то, что я пытаюсь кодировать, что-то с обратным вызовом ajax после нажатия кнопки закрытия (неОтветьте, чтобы посмотреть пользовательский интерфейс jQuery, пожалуйста :))

спасибо;)

Answer 1

Я должен сделать несколько предположений, потому что вы не разместили свою разметку.Я думаю, что Диодей на правильном пути.Вы используете абсолютное позиционирование для своей новой кнопки закрытия.Абсолютное позиционирование будет искать в DOM, пока не найдет относительно позиционированный элемент для привязки координат.если element, который вы передаете, не имеет свойства position:relative, то кнопка может быть расположена где угодно.

Два возможных исправления:

Добавить относительное позиционированиеко всему, что вы добавляете кнопку закрытия:

element.css({'position':'relative'});

Очевидно, это заменит любое другое ранее установленное позиционирование.Существует вероятность, что это взорвет ваш макет, если вы добавите кнопки закрытия повсюду.

Второй вариант - убедиться, что элемент с относительным позицией only находится высоко в DOMТаким образом, все ваши кнопки закрытия расположены на основе одного и того же.Это немного странно, но затем вы можете расположить их в зависимости от x и y элемента:

var x = element.position().x;  
var y = element.position().y;    
// you can add the necessary offsets like element width or height