Положение внедренного DIV с помощью функции JQuery «Load» - PullRequest
Новая
       20

Положение внедренного DIV с помощью функции JQuery «Load»

0 голосов
/ 18 ноября 2009

Я извлекаю некоторую информацию из базы данных, затем помещаю ее в DIV и внедряю все это на мою страницу. У меня проблема с позиционированием недавно введенного DIV после того, как он завершил загрузку.

Вот мой 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();
   });
});

Я попытался поместить событие загрузки для DIV с быстрой информацией после события щелчка загрузки содержимого, внутри функции обратного вызова getJSON, до события щелчка загрузки содержимого и внутри функции обратного вызова щелчка загрузки содержимого. Я до сих пор не могу заставить его работать.

Что я делаю не так с функцией загрузки?

Ответы [ 5 ]

2 голосов
/ 18 ноября 2009

Поместите его в ваш обработчик успеха, который вы уже получили: 

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

Проблема с загрузкой состоит в том, что вы должны сделать этот обработчик до того, как элемент будет полностью загружен ... Я никогда не использовал его, потому что это больно:)

Лично я бы написал positionBoxCenter как быстрый плагин jQuery и сделал бы что-то более похожее на это: 

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

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

0 голосов
/ 18 ноября 2009

Событие загрузки не относится к div, так как оно просто не загружено.

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

0 голосов
/ 18 ноября 2009

Вы создаете свой div в функции ready, которая будет вызываться при нажатии # load-content.

Однако вы настраиваете событие загрузки сразу. Этот javascript будет выполняться при загрузке страницы, что будет гораздо раньше, чем будет создан div.

Я бы поставил ее в конце функции getJSON следующим образом: 

$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();
  });
0 голосов
/ 18 ноября 2009

Проблема в том, что вы пытаетесь привязать обработчик события к div.quick-info, прежде чем такой элемент существует (когда $ (document) .ready () выполняется, div еще не добавлен)

Используйте предложение thenduks о выполнении действия в обработчике успеха.

0 голосов
/ 18 ноября 2009

попробуйте использовать $ (). Live 

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

с jQuery 1.3.2 потому что div.quick-info не существует в то время, когда вы пытаетесь связать load

также к вашему сведению .. в целом, $('#load-content') выбирает быстрее, чем $('a#load-content')

...