Question

我从数据库中提取一些信息，然后将其放入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();
   });
});

我已尝试在加载内容点击事件之后，在getJSON回调函数内，在加载内容点击事件之前，以及在加载内容点击回调函数内，为quick-info DIV放置加载事件。我仍然无法让它发挥作用。

我在加载功能方面做错了什么？

Answer 1

将它放在你已经拥有的成功处理程序中：

  $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中。或者，您可以在执行追加之前尝试附加该负载处理程序（您仍然需要扩展该元素）。

Answer 2

尝试使用$().live

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

使用jQuery 1.3.2 因为当您尝试绑定div.quick-info

时load不存在

同样FYI ..一般来说，$('#load-content')选择的速度比$('a#load-content')

快

Answer 3

问题是你试图在这样的元素存在之前将事件处理程序绑定到'div.quick-info'。（当$（document）.ready（）执行时，div尚未添加）

使用thenduks建议在成功处理程序中完成操作。

Answer 4

您正在准备函数中创建div，一旦单击#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();
  });

Answer 5

load事件不适用于div，因为它根本没有加载。

完全跳过load事件，只需将元素放在将元素添加到body的代码之后。

使用JQuery的“加载”功能定位注入的DIV

5 个答案: