التابع .live() في jQuery
.live( events, handler )
أهمل مع الإصدار: 1.7، وحذف مع الإصدار: 1.9.
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يربط هذا التابع معالج حدث معين بجميع العناصر التي طابقت المحدِّد الحالي الآن وفي المستقبل.
.live( events, handler )
أُضيف مع الإصدار: 1.3.
events
سلسلة نصية تحتوي على نوع حدث JavaScript مثل "click" أو "keydown". يمكن للسلسلة النصية بدءًا من الإصدار jQuery 1.4 أن تحتوي على أنواع أحداث متعدِّدة مفصولةً بمسافة فارغة، أو أسماء أحداث مخصَّصة.
handler
دالة من الشكل Function( Event eventObject )، وتمثِّل الدالة المراد تنفيذها في كل مرة يُستدعى فيها الحدث.
.live( events [, data ], handler )
أضيف مع الإصدار: 1.4.
events
سلسلة نصية تحتوي على نوع الحدث في JavaScript مثل "click" أو "keydown". يمكن للسلسلة النصية بدءًا من الإصدار jQuery 1.4 أن تحتوي على أنواع أحداث متعددة مفصولة بمسافة فارغة، أو أسماء أحداث مخصَّصة.
data
كائن مجرد (Object) يحتوي على البيانات التي ستُمرَّر إلى معالج الحدث.
handler
دالة من الشكل Function( Event eventObject )، وتمثِّل الدالة المراد تنفيذها في كل مرة يُستدعى فيها الحدث.
.live( events )
events
كائن مجرد لنوع واحد أو أكثر من أنواع أحداث JavaScript ودوال لتنفيذ تلك الأحداث.
بدءًا من الإصدار jQuery 1.7، أهمل التابع .live()، وحل مكانه التابع .on() لربط معالجات الأحداث. يجب على مستخدمي إصدارات jQuery القديمة استعمال التابع .delegate() إذ له أفضلية على التابع .live().
يوفر هذا التابع وسيلة لربط معالجات الحدث المفوَّضة بالكائن document التابع للصفحة والذي يبسِّط استعمال معالجات الحدث عندما يضاف المحتوى بشكل ديناميكي إلى الصفحة. راجع للمزيد من المعلومات حول الموازنة بين الأحداث المفوَّضة (delegated events) مع الأحداث المباشرة (direct events) في توثيق التابع .on().
يوجد تابعان يشبهان التابع .live() ويمكن استعمالهما عوضًا عنه في الإصدارات اللاحقة. ستوضح الشيفرة التالية نموذج عن استعمال مماثل لتوابع ربط الأحداث تلك الثلاثة:
$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );
يمكن أن يكون المعامل events إمَّا قائمة من أسماء أنواع الأحداث المفصولة بفواصل (ويُذكر اسم الفاصل المستعمل اختياريًا)، أو كائن من سلاسل نصيةٍ تحتوي كل منها على اسم الحدث، ومعالجات أحداث. المعامل data هو معامل اختياري ويمكننا ألّا نحدد له قيمةً. استدعاء التوابع الثلاثة التالية مثلًا هو متكافئ وظيفيًّا (ولكن انظر إلى الأمثلة في الأسفل للتعرف على طرائق أكثر فاعلية وأفضل أداء لربط معالجات الحدث المفوضَّة):
$( "a.offsite" ).live( "click", function() {
alert( "Goodbye!" ); // jQuery 1.3+
});
$( document ).delegate( "a.offsite", "click", function() {
alert( "Goodbye!" ); // jQuery 1.4.3+
});
$( document ).on( "click", "a.offsite", function() {
alert( "Goodbye!" ); // jQuery 1.7+
});
لم يعد يُنصح باستعمال التابع .live() منذ أن وفرت إصدارات jQuery اللاحقة توابع أفضل منه ولا تحتوي على عيوبه. ظهرت المشكلات التالية على وجه الخصوص تزامنًا مع استعمال التابع .live():
- تحاول jQuery استرجاع العناصر التي اختارها المحدِّد قبل استدعاء التابع
.live()، وهذا قد يعدُّ هدرًا للوقت في الصفحات الكبيرة. - استخدام سلسلة من التوابع هو أمرٌ غير مدعوم. الشكل
$( "a" ).find( ".offsite, .external" ).live( ... ); مثلًا غير صحيح ولن يعمل بالشكل المتوقع له. - لما كانت جميع أحداث التابع
.live()مرتبطة بالعنصرdocument، فإنَّ الأحداث تسلك أطول وأبطأ مسار محتمل قبل أن تُعالج. - لا ينتقل الحدث
clickفي الأجهزة المحمولة (mobile) ذات النظام iOS (مثل iPhone أو iPad أو iPod Touch) إلى جسم الصفحة لأغلب العناصر، ولا يمكن استعماله آنذاك مع التابع.live()دون تطبيق أحد الحلول التالية:- استعمال عناصر أساسية قابلة للضغط مثل العنصر
والعنصر<button>إذ ينقل كلاهما الحدث إلى العنصرdocument. - استعمال
.on()أو .delegate() المرتبطة بالعنصر في مستوى أدنى منdocument.bodyبما أن أجهزة iOS المحمولة لا تنقل الحدث إلى العنصر<body>في الصفحة. - تطبيق تنسيق CSS وهو cursor: pointer على العنصر الذي يريد نقل الأحداث
click(أو على العنصر الأب من ضمنهdocument.documentElement). انتبه إلى أنَّ ذلك سيعطل خاصيَّة النسخ واللصق في العنصر، وسيسبب في تمييزه (highlighted) عند الضغط عليه.
- استعمال عناصر أساسية قابلة للضغط مثل العنصر
- ليس لاستدعاء
event.stopPropagation() في معالج الحدث أثر في إيقاف معالجات الحدث المرتبطة في المستويات الدنيا في الصفحة، إذ يكون الحدث قد انتشر مسبقًا إلىdocument. - يتفاعل التابع
.live()مع توابع أحداث أخرى في عدة طرائق يمكنها أن تفاجئك مثل$( document ).off( "click" )الذي يزيل جميع معالجات الحدثclickالمرتبطة باستعمال أي استدعاءٍ للتابع .live().
بالنسبة للصفحات التي ما تزال تستعمل التابع .live()، فهذه قائمة باختلافات بعض الإصدارات والتي قد تكون مفيدة:
- قبل الإصدار jQuery 1.7 ولإيقاف تنفيذ معالجات إضافية بعد ارتباط واحد باستعمال التابع
.live()، يجب على المعالج إعادة القيمةfalse. لن يحل استدعاء التابع .stopPropagation() هذه المشكلة. - بدءًا من الإصدار jQuery 1.4، أصبحت التابع
.live()يدعم أحداث مخصصة بالإضافة إلى جميع أحداث JavaScript التي تنتشر؛ ويدعم أيضًا بعض الأحداث التي لا تنتشر من ضمنها الحدثchange، والحدثsubmit، والحدثfocus، والحدثblur. - في إصدارات jQuery 1.3.x، أحداث Javascript التالية يمكنها الارتباط فقط وهي: الحدث
click، والحدثdblclick، والحدثkeydown، والحدثkeypress، والحدثkeyup، والحدثmousedown، والحدثmousemove، والحدثmouseout، والحدثmouseover، والحدثmouseup.
أمثلة
إلغاء السلوك الافتراضي ومنعه من الإنتشار للأعلى بإعادة القيمة false:
$( "a" ).live( "click", function() {
return false;
});
إلغاء السلوك الافتراضي فقط باستعمال التابع .preventDefault():
$( "a" ).live( "click", function( event ) {
event.preventDefault();
});
ربط أحداث مخصصة باستعمال التابع .live():
$( "p" ).live( "myCustomEvent", function( event, myName, myValue ) {
$( this ).text( "مرحبًا يا صديق" );
$( "span" )
.stop()
.css( "opacity", 1 )
.text( "اسمي = " + myName )
.fadeIn( 30 )
.fadeOut( 1000 );
});
$( "button" ).click(function() {
$( "p" ).trigger( "myCustomEvent" );
استعمال كائن لربط معالجات أحداث متعددة. لاحظ أنَّ التابع .live() يستدعي معالجات الحدث click، والحدث mouseover، والحدث mouseout لجميع الفقرات حتى الجديدة منها.
$( "p" ).live({
click: function() {
$( this ).after( "<p>فقرة أخرى</p>" );
},
mouseover: function() {
$( this ).addClass( "over" );
},
mouseout: function() {
$( this ).removeClass( "over" );
}
});