0

データベースからいくつかの情報を取得し、それを 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();
   });
});

load-content クリック イベントの後、getJSON コールバック関数内、load-content クリック イベントの前、および load-content クリック コールバック関数内に、quick-info DIV の load イベントを配置しようとしました。私はまだそれを機能させることができません。

ロード機能で何が間違っていますか?

4

5 に答える 5

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 に追加する前に位置を設定することができます。別の方法として、追加を行う前にそのロード ハンドラーをアタッチすることもできます (要素を拡張する必要があります)。

于 2009-11-18T15:02:32.360 に答える
0

$()。liveを使用してみてください

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

jQuery 1.3.2を使用div.quick-infoするのは、バインドしようとしたときに存在しないためです。load

また、参考までに..一般的に、$('#load-content')より速く選択します$('a#load-content')

于 2009-11-18T15:05:58.560 に答える
0

問題は、そのような要素が存在する前に、イベントハンドラーを「div.quick-info」にバインドしようとしていることです。($(document).ready()が実行されるとき、divはまだ追加されていません)

サクセスハンドラーでアクションを実行するというnduksの提案を使用します。

于 2009-11-18T15:07:02.973 に答える
0

#load-contentがクリックされると呼び出されるready関数でdivを作成しています。

ただし、ロードイベントをすぐに設定しています。その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();
  });
于 2009-11-18T15:07:33.333 に答える
0

loadイベントは、単にロードされないため、divには適用されません。

Skip the load event entirely and just place the code that positions the element after the code that adds the element to the body.

于 2009-11-18T15:07:35.017 に答える