jQuery 3.3

.live()




jquery

.live (events، handler) الإرجاع: إصدار jQuery deprecated: 1.7 ، removed: 1.9

الوصف: قم بإرفاق معالج أحداث لكافة العناصر التي تطابق المحدد الحالي ، الآن وفي المستقبل.

  • الإصدار المضافة: 1.3 الحية (الأحداث ، معالج)

    • أحداث
      اكتب: String
      سلسلة تحتوي على نوع حدث لجافا سكريبت ، مثل "click" أو "keydown". بدءًا من jQuery 1.4 ، يمكن أن تحتوي السلسلة على أنواع أحداث متعددة أو مفصولة بمسافات أو أسماء أحداث مخصصة.
    • معالج
      النوع: Function ( Event eventObject)
      دالة يتم تنفيذها في وقت تشغيل الحدث.
  • الإصدار المضاف: 1.4 .live (الأحداث [، البيانات] ، المعالج)

    • أحداث
      اكتب: String
      سلسلة تحتوي على نوع حدث لجافا سكريبت ، مثل "click" أو "keydown". بدءًا من jQuery 1.4 ، يمكن أن تحتوي السلسلة على أنواع أحداث متعددة أو مفصولة بمسافات أو أسماء أحداث مخصصة.
    • البيانات
      اكتب: PlainObject
      كائن يحتوي على بيانات سيتم تمريرها إلى معالج الحدث.
    • معالج
      النوع: Function ( Event eventObject)
      دالة يتم تنفيذها في وقت تشغيل الحدث.
  • الإصدار المضافة: 1.4.3 .live (الأحداث)

    • أحداث
      اكتب: PlainObject
      عنصر بسيط لواحد أو أكثر من أنواع أحداث JavaScript ووظائفها لتنفيذها.

اعتبارًا من jQuery 1.7 ، تم إهمال طريقة .live() . استخدم .on() لإرفاق معالجات الأحداث. يجب على مستخدمي الإصدارات القديمة من jQuery استخدام .delegate() بتفضيل .live() .

يوفر هذا الأسلوب وسيلة لإرفاق معالجات الأحداث المفوضة بعنصر document الخاص بالصفحة ، مما يسهل استخدام معالجات الأحداث عند إضافة المحتوى ديناميكيًا إلى إحدى الصفحات. انظر مناقشة الأحداث المباشرة مقابل المفوض في طريقة .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 );        // jQuery 1.7+

يمكن أن تكون وسيطة 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 ، فإن الأحداث تأخذ أطول وأبطأ مسار ممكن قبل أن يتم التعامل معها.
  • على أجهزة iOS المحمولة (iPhone و iPad و iPod Touch) لا .live() حدث click إلى نص المستند لمعظم العناصر ولا يمكن استخدامه مع .live() دون تطبيق أحد الحلول التالية:
    1. استخدم عناصر قابلة للنقر أصلاً مثل button أو button ، حيث يقوم كل منهما document الفقاعة.
    2. استخدم .on() أو .delegate() مرفقة بعنصر أدنى من مستوى document.body ، نظرًا لأن نظام iOS المحمول لا يتدفق داخل الجسم.
    3. تطبيق cursor:pointer نمط CSS cursor:pointer على العنصر الذي يحتاج إلى فقرات النقرات (أو أحد الوالدين بما في ذلك document.documentElement ). لاحظ مع ذلك ، سيؤدي هذا إلى تعطيل النسخ / اللصق على العنصر ويتسبب في تمييزه عند لمسه.
  • استدعاء event.stopPropagation() في معالج الأحداث غير فعال في إيقاف معالجات الأحداث المرفقة أقل في المستند؛ لقد انتشر الحدث بالفعل إلى document .
  • تتفاعل طريقة .live() مع طرق الحدث الأخرى بطرق قد تكون مفاجئة ، على سبيل المثال ، $( document ).off( "click" ) يزيل جميع معالجات النقر المرفقة بأي مكالمة إلى .live() !

بالنسبة إلى الصفحات التي لا تزال تستخدم .live() ، قد تكون قائمة الاختلافات الخاصة بالإصدار مفيدة:

  • قبل jQuery 1.7 ، لإيقاف معالجات إضافية من تنفيذ بعد واحد من استخدام .live() ، يجب أن يقوم المعالج بإرجاع false . .stopPropagation() الاتصال .stopPropagation() إلى تحقيق ذلك.
  • بدءًا من jQuery 1.4 ، تدعم طريقة .live() الأحداث المخصصة بالإضافة إلى جميع أحداث جافا سكريبت التي .live() الفقاعات . كما يدعم أيضًا أحداثًا معينة لا تتضمن فقاعات ، بما في ذلك 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( "Hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
  });
$( "button" ).click(function() {
  $( "p" ).trigger( "myCustomEvent" );
});

استخدم كائن لربط العديد من معالجات الأحداث المباشرة. لاحظ أن .live () يستدعي معالجات أحداث النقر و mouseover و mouseout لجميع الفقرات - حتى الجديدة منها.

$( "p" ).live({
  click: function() {
    $( this ).after( "<p>Another paragraph!</p>" );
  },
  mouseover: function() {
    $( this ).addClass( "over" );
  },
  mouseout: function() {
    $( this ).removeClass( "over" );
  }
});