ملاحظة من المؤلف (pie6k). لقد قمت بإنشاء هذا lib منذ بضع سنوات وكان رائعًا في ذلك الوقت. الآن ربما لا ينبغي عليك استخدام jQuery لأشياء من هذا القبيل والذهاب إلى React أو شيء مشابه. شكرًا لك. — 2018-11-21
لا تزال تقارير الأخطاء مقبولة.
تم إنشاء البرنامج المساعد jQuery.initialize
للمساعدة في الحفاظ على العناصر التي تم إنشاؤها ديناميكيًا على الصفحة.
سوف يتكرر jQuery.initialize على كل عنصر يطابق المحدد ويطبق وظيفة رد الاتصال. سوف يستمع بعد ذلك إلى أي تغييرات في نموذج كائن المستند ويطبق وظيفة رد الاتصال على أي عناصر جديدة يتم إدراجها في المستند والتي تطابق المحدد الأصلي.
$.initialize([selector], [callback]);
يسمح هذا للمطورين بتحديد رد اتصال التهيئة الذي يتم تطبيقه عند إدراج عنصر جديد مطابق للمحدد في DOM. وهو يعمل أيضًا مع العناصر المحملة عبر AJAX.
عرض توضيحي بسيط - انقر هنا
$.initialize(".some-element", function() {
$(this).css("color", "blue");
});
ولكن الآن إذا ظهر عنصر جديد مطابق لمحدد .some-element
على الصفحة، فسيتم تهيئته على الفور. الطريقة التي تتم بها إضافة العنصر الجديد ليست مهمة، ولا تحتاج إلى الاهتمام بأي عمليات رد اتصال وما إلى ذلك.
$("<div/>").addClass("some-element").appendTo("body"); //new element will have blue color!
لإيقاف مراقبة المستند، يمكنك قطع اتصال المراقب عن طريق استدعاء disconnect()
على مثيل MutationObserver
الذي تم إرجاعه مما يمنعه من تلقي المزيد من الإشعارات حتى وما لم يتم استدعاء observe()
مرة أخرى. . على سبيل المثال،
var obs = $.initialize([selector], [callback]); // Returns MutationObserver
obs.disconnect();
target
بشكل افتراضي، تتم ملاحظة المستند بأكمله للتغييرات. قد يؤدي هذا إلى ضعف الأداء. يمكن ملاحظة عقدة معينة في DOM عن طريق تحديد هدف:
$.initialize(".some-element", function() {
$(this).css("color", "blue");
}, { target: document.getElementById('observe-this-element') });
بخلاف ذلك، سيكون الهدف الافتراضي هو document.documentElement
.
observer
قد يتم توفير MutationObserverInit
مخصص. إذا لم يتم توفيره، فسيتم ضبطه افتراضيًا على التكوين الداخلي.
يعتمد البرنامج المساعد على MutationObserver
. سيعمل على IE9+ ( اقرأ الملاحظة أدناه ) وكل متصفح حديث.
ملاحظة: لجعله يعمل على IE9 وIE10، ستحتاج إلى إضافة MutationObserver polyfill - مثل تلك الموجودة هنا: https://github.com/webcomponents/webcomponentsjs
اختبار الأداء (بفضل @bezborodow و @liuhongbo )
bower
و npm
، وأضف اختبار الأداء المتقدم.