ضع div محقن باستخدام وظيفة "تحميل" jQuery

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

لقد حاولت وضع حدث التحميل لـ Quick-Info Div بعد حدث النقر فوق محتوى التحميل ، داخل وظيفة Getjson Callback ، قبل حدث انقر فوق محتوى التحميل ، وداخل وظيفة Callback Click-Load. ما زلت لا أستطيع تشغيلها.

ماذا أفعل خطأ في وظيفة الحمل؟

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

أيضا لمعلوماتك .. بشكل عام ، $('#load-content') يختار أسرع من $('a#load-content')

Answer 3

المشكلة هي أنك تحاول ربط معالج الأحداث بـ "div.quick-info" قبل وجود هذا العنصر. (عند تنفيذ $ (وثيقة) .READY () ، لم تتم إضافة DIV بعد)

استخدم اقتراح Thenduks لإنجاز الإجراء في معالج النجاح.

Answer 4

أنت تقوم بإنشاء 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();
  });

Answer 5

لا ينطبق حدث التحميل على Div ، لأنه ببساطة لم يتم تحميله.

تخطي حدث التحميل بالكامل وقم فقط بوضع الكود الذي يضع العنصر بعد الكود الذي يضيف العنصر إلى الجسم.