Posicione uma divisão injetada usando a função de "carga" de JQuery

Question

Estou retirando algumas informações de um banco de dados, colocando -as em uma div e injetando tudo isso na minha página. O problema que tenho é posicionar a Div recém -injetada depois de terminar o carregamento.

Aqui está meu jQuery:

$j(document).ready(function() {
   $('a#load-content').click(function(event) {
      event.preventDefault();
      var productId = $j(this).attr('id').replace(/more-info-/, '');

      $j.getJSON('../json/quicky/product/id/' + productId, function(json) {
         var productImage = json.image;
         var html = '<div class="quick-info"><img src="' + json.image + '"/></div>';

         $j(body).append(html);   
      });
   });

   $j('div.quick-info').load(function() {
      positionBoxCenter();
   });
});

Tentei colocar o evento de carregamento para a Div Quick-Info após o evento de clique de conteúdo de carregamento, dentro da função Getjson Returb, antes do evento de clique de conteúdo de carga e dentro da função de retorno de chamada de clique no conteúdo de carregamento. Ainda não consigo fazer isso funcionar.

O que estou fazendo de errado com a função de carga?

Answer 1

Posicione -o em seu manipulador de sucesso que você já tem:

  $j.getJSON('../json/quicky/product/id/' + productId, function(json) {
     var html = '<div class="quick-info"><img src="' + json.image + '"/></div>';

     $j('body').append( html );
     positionBoxCenter();
  });

O problema com a carga é que você precisa fazer esse manipulador antes que o elemento esteja totalmente carregado ... Eu nunca o usei porque é uma dor :)

Pessoalmente, eu escrevia positionBoxCenter Como um plugin jQuery rápido e faça algo mais assim:

  $j.getJSON('../json/quicky/product/id/' + productId, function(json) {
     var html = $j('<div class="quick-info"><img src="' + json.image + '"/></div>');
     // so now html is actually a jquery extended element
     html.positionBoxCenter();
     $j('body').append( html );
  });

Dessa forma, você pode usar o jQuery para configurar seu posicionamento antes mesmo de ser adicionado ao DOM. Como alternativa, você pode tentar anexar esse manipulador de carga antes de fazer o apêndice (você ainda precisará estender o elemento).

Answer 2

tente usar $ (). Live

   $j('div.quick-info').live('load', function() {
      positionBoxCenter();
   });

com jQuery 1.3.2 porque div.quick-info não existe no momento em que você tenta vincular load

também para sua informação .. em geral, $('#load-content') seleciona mais rápido que $('a#load-content')

Answer 3

O problema é que você está tentando vincular um manipulador de eventos a 'Div.Qick-Info' antes que esse elemento exista. (Quando $ (document) .ready () executa, a div ainda não foi adicionada)

Use a sugestão de Thenduks para realizar a ação no Handler de sucesso.

Answer 4

Você está criando sua div na função pronta, que será chamada assim que um conteúdo de carga#for clicado.

No entanto, você está configurando o evento de carga imediatamente. Esse JavaScript será executado à medida que a página é carregada que será muito antes que a DIV seja realmente criada.

Eu colocaria no final da função getjson como assim:

$j.getJSON('../json/quicky/product/id/' + productId, function(json) {
     var productImage = json.image;
     var html = '<div class="quick-info"><img src="' + json.image + '"/></div>';

     $j(body).append(html);   
     positionBoxCenter();
  });

Answer 5

O evento de carga não se aplica à div, pois simplesmente não está carregado.

Pule completamente o evento de carga e apenas coloque o código que posiciona o elemento após o código que adiciona o elemento ao corpo.