jQuery/on

‎.on( events [, selector ] [, data ], handler )‎

القيم المعادة

يعيد كائنًا من النوع jQuery.

الوصف

يربط هذا التابع دالة معالج حدث لحدثٍ واحدٍ أو أكثر  بالعناصر المحدَّدة.

‎.on( events [, selector ] [, data ], handler )‎

أُضيف مع الإصدار: 1.7.

events

سلسلة نصية تحتوي على نوع حدث واحد، أو عدَّة أنواع أحداث مفصولة بمسافة فارغة بالإضافة إلى مجالات أسماء (namespaces) (اختياريَّا) مثل "click"، أو "keydown.myPlugin".

selector

سلسلة نصية تمثِّل اسم المحدِّد الذي يرشِّح أحفاد (descedants) العناصر المحدَّدة حاليًا التي تستدعي الحدث. إن كانت قيمة هذا الوسيط null أو لم يُعطَ، فسيُتسدعَى الحدث دومًا عند الوصول إلى العنصر المحدَّد.

data

أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استخدام أي نوع)، ويُمثِّل كائنًا يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث في event.data عندما يُستدعَى الحدث.

handler

دالة من الشكل Function( Event eventObject [, Anything extraParameter ] [, ... ] )‎ وتمثِّل الدالة المُراد تنفيذها عندما يُستدعى الحدث. يُمكن استعمال القيمة false كاختصارٍ لدالةٍ وظيفتها هي إعادة هذه القيمة (return false).

‎.on( events [, selector ] [, data ] )‎

أضيف مع الإصدار: 1.7.

events

كائن مجرَّد (Object) يمثِّل المفاتيح فيه نوع حدثٍ واحدٍ أو عدَّة أنواع أحداث مفصولة بمسافة فارغة بالإضافة إلى مجالات أسماء (اختياريًّا)، وتمثل القيم فيه دالة معالج الحدث المراد تنفيذها عندما يُستدعَى الحدث.

selector

سلسلة نصية تمثِّل اسم المحدِّد الذي يرشِّح أحفاد (descedants) العناصر المحدَّدة حاليًا التي تستدعي الحدث. إن كانت قيمة هذا الوسيط null أو لم يُعطَ، فسيُتسدعى معالج الحدث دومًا عند الوصول إلى العنصر المحدَّد.

data

أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استخدام أي نوع)، ويُمثِّل كائنًا يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث في event.data عندما يُستدعَى الحدث.

يربط التابع ‎‎.on()‎‎ معالجات حدثٍ بمجموعة العناصر المحدَّدة حاليًا في كائن jQuery. بدءًا من الإصدار 1.7، وفَّر التابع ‎‎.on()‎‎ جميع الوظائف المطلوبة لربط معالجات الحدث. إن أردت الانتقال من توابع أحداث قديمة في إصدارات jQuery السابقة، فارجع إلى صفحة التابع ‎.bind()‎ والتابع ‎.delegate()‎ والتابع ‎.live()‎. إن أردت فك ربط الأحداث المرتبطة باستعمال التابع ‎.on()‎، فاستخدم التابع ‎.off()‎. أمَّا إن أردت ربط حدثٍ يعمل مرةً واحدة فقط ثمَّ يزيل نفسه، فاستعمل التابع ‎.one()‎.

أسماء الأحداث ومجالات أسمائها (Event names and namespaces)

يمكن استعمال أيَّ أسماء أحداثٍ مع الوسيط events. ستبحث jQuery عن الحدث في أنواع أحداث JavaScript القياسيَّة في المتصفح ثمَّ ستسدعي دالة معالج الحدث المُعطاة في الوسيط handler عندما يولد المتصفح أحداثًا تبعًا لأفعال المستخدم مثل توليد الحدث click. أضف إلى ذلك أنَّ التابع ‎.trigger()‎ يمكنه إطلاق أحداث المتصفح القياسيَّة والأحداث المخصَّصة كلاهما لاستدعاء المعالجات المرتبطة بها. يمكن أن تحتوي أسماء الأحداث على حروف أبجدية أو رقمية (alphanumeric)، وشرطة سفلية، ونقطين.

يمكن وضع اسم حدثٍ في مجالات أسماء (namespaces) وبذلك يمكن بسهولة حذف أو استدعاء دوال معينة معالِجة للحدث عوضًا عن حذفها أو استدعائها جميعها. يعرِّف click.myPlugin.simple مثلًا مجال الاسم myPlugin و simple للحدث click، ويمكن حينئذٍ حذف معالج حدث محدَّد للحدث click المرتبط باستعمال مجال الاسم ذاته مثل ‎.off("click.myPlugin")‎ أو ‎.off("click.simple")‎ دون القلق على معالجات الحدث الأخرى المرتبطة بالعنصر. مجالات الأسماء مشابه للأصناف في CSS في عدم وجود تسلسل هرمي فيها، إذ يجب تطابق اسم واحد فقط. مجالات الأسماء التي تبدأ بشرطة سفليَّة محجوزةٌ لكي تستعملها jQuery فقط.

في الشكل الثاني للتابع ‎.on()‎، يكون الوسيط events كائنًا مجرَّدًا. قيم مفاتيح هذا الكائن مماثلة تمامًا لقيم الوسيط events في الشكل الأول، أي سلسلة نصية تحتوي على نوع حدث واحد، أو عدَّة أنواع أحداث مفصولة بمسافة فارغة بالإضافة إلى مجال الاسم (اختياريَّا). أمَّا قيمة كل مفتاح فهي الدالة (أو القيمة false) المراد تنفيذها عندما يُستدعَى الحدث، أي تمثِّل قيمة الوسيط handler في الشكل الأول. من ناحية أخرى، سنجد بعد قليل أنَّ الشكلين الأول والثاني للتابع ‎.on()‎ متماثلان تمامًا وظيفيًّا.

الأحداث المفوَّضة والمباشرة (Direct and delegated events)

أغلب أحداث المتصفحات تنتشر (bubble أو propagate) ابتداءً من أعمق عنصر (العنصر الذي أطلق الحدث [event target]) في الصفحة وتستمر صعودًا حتى العنصر body والعنصر document. في المتصفح Internet Explorer 8 والإصدارات السابقة له، هنالك أحداث قليلة مثل الحدث change والحدث submit لا تنتشر ولكنَّ jQuery قد عدلتها لكي تنتشر، إذ أنشأت سلوكًا ثابتًا في جميع المتصفحات.

إن لم يعطَ الوسيط selector أو كانت قيمته null، فسيشار إلى معالج الحدث بوصفه مباشرًا (direct) أو رُبِطَ مباشرةً (directly-bound). سيُستدعَى الحدث في كل مرةٍ يقع الحدث على العناصر المحدَّدة سواءً وقع الحدث مباشرةً على العنصر أو انتشر من عنصر سليل (حفيد [descendant]) ووصل إليه.

عندما يُعطَى الوسيط selector، فسيُشار إلى معالج الحدث بوصفه مفوَّضًا (delegated)، وحينئذٍ لا يُستدعَى معالج الحدث عندما يقع الحدث مباشرةً على العنصر المرتبط به ولكن يُستدعَى عندما يقع على العناصر السليلة فقط التي تطابق المحدِّد. تنشر jQuery الحدث ابتداءً من العنصر الذي أطلق الحدث ويستمر صعودًا حتى العنصر الذي ارتبط معالج الحدث به، وتنفِّذ معالج الحدث لجميع العناصر الواقعة بين هذين العنصرين والتي تطابق المحدِّد.

تُربَط معالجات الحدث بالعناصر المحدَّدة حاليًا فقط، ويجب أن توجد في الوقت الذي تستدعي فيه الشيفرة التابع ‎.on()‎. للتأكد من أنَّ العناصر موجودة ويمكن تحديدها، ضع السكربت بعد تلك العناصر مباشرةً في شيفرة HTML أو اربط الحدث داخل معالج الحدث ready في الصفحة. عوضًا عن ذلك، يمكن استعمال الأحداث المفوَّضة (delegated events) لربط معالجات الحدث.

تتميز الأحداث المفوَّضة بأنَّها تستطيع معالجة الأحداث من العناصر السليلة التي تضاف إلى الصفحة لاحقًا. بناءً على ذلك، تستطيع استخدام الأحداث المفوَّضة عن طريق اختيار عنصرٍ موجود حتمًا في لحظة ربط معالج الحدث المفوَّض لكي تتجنب الحاجة إلى ربط وإزالة معالجات الحدث مرارًا وتكرارًا. يمكن أن يكون هذا العنصر عنصرًا حاويًا للواجهة (view) في نمط التصميم MVC (اختصارًا للعبارة Model-View-Controller) مثلًا، أو العنصر document إن أراد معالج الحدث مراقبة جميع الأحداث المنتشرة في الصفحة. يكون العنصر document متاحًا داخل العنصر head في الصفحة أي قبل تحميل أي عنصر HTML آخر، لذا من الآمن ربط الأحداث به دون انتظار أن تكون الصفحة جاهزة.

بالإضافة إلى قدرة الأحداث المفوَّضة على معالجة الأحداث من العناصر التي لم تُنشأ بعد، تتميز أيضًا بإمكانيتها على تقليل الحمل الزائد (overhead) عند مراقبة الكثير من العناصر. يوضح المثال التالي ربط معالج حدثٍ مع 1000 عنصر في جدول بيانات (يحتوي على 1000 سطر في العنصر <tbody> المجمِّع):

$( "#dataTable tbody tr" ).on( "click", function() {
 console.log( $( this ).text() );
});

يحاول الحدث المفوَّض الوصول إلى معالج الحدث لعنصرٍ واحدٍ فقط، وهو العنصر <tbody>، وينتشر الحدث صعودًا إلى مستوى واحد فقط (من مستوى العنصر <tr> المضغوط عليه إلى مستوى العنصر <tbody>):

$( "#dataTable tbody" ).on( "click", "tr", function() {
 console.log( $( this ).text() );
});

ملاحظة: لا تعمل الأحداث المفوَّضة في صيغة SVG.

معالج الحدث وبيئته (The event handler and its environment)

الوسيط handler هو دالةٌ (أو القيمة false) ويجب تمريره إلا إذا مُرَّر الوسيط events (أي يُمرَّر كائن كما شُرح آنفًا). يمكن تمرير عددًا غير محدود من دوال معالجة الحدث إلى التابع ‎.on()‎ كما وضح المثالين السابقين ذلك، أو التصريح عن دالة مسماة (named function) ثمَّ تمرير اسمها:

function notify() {
 alert( "clicked" );
}
$( "button" ).on( "click", notify );

عندما يستدعي المتصفح حدثًا ما أو تستدعي JavaScript التابع ‎.trigger()‎ من مكتبة jQuery، فستمرِّر jQuery معالج الحدث إلى الكائن event والذي يُستخدم لتحليل وتغيير حالة الحدث. هذا الكائن هو مجموعة جزئيَّة مؤحدة (normalized subset) من البيانات يوفرها المتصفح. يمكن أن تجد كائن أحداث المتصفح الأساسيَّة غير المعدلة في event.originalEvent. على سبيل المثال، يحتوي event.type على اسم الحدث (مثل "resize")، ويشير event.target إلى العنصر الذي وقع عليه الحدث.

تنتشر أغلب الأحداث افتراضيًّا بدءًا من العنصر الذي وقع عليه الحدث وتستمر صعودًا حتى العنصر document، وتستدعي jQuery أية معالجات أحداث متطابقة رُبطت بكل عنصر موجود في المجال الواقع بين العنصرين السابقين. يستطيع معالج الحدث أن يمنع الحدث من الانتشار للعناصر الأعلى في شجرة الصفحة (وبالتالي تُمنع معالجات الأحداث في تلك العناصر من التنفيذ) باستدعاء event.stopPropagation()‎. مع ذلك، ستُنفَّذ أية معالجات حدثٍ أخرى مرتبطة بالعنصر الحالي؛ ولمنعها أيضًا، استعمل event.stopImmediatePropagation()‎. (تُستدعَى معالجات الحدث المرتبطة بعنصرٍ بالترتيب ذاته الذي رُبطت به).

وبالمثل، يمكن أن يُستدعَى معالج الحدث event.preventDefault()‎ لإيقاف المتصفح من إجراء الوظائف الافتراضيَّة المرتبطة بالحدث؛ على سبيل المثال، السلوك الافتراضي للحدث click في عناصر <a> هو الانتقال إلى الرابط. لا تمتلك جميع الأحداث في المتصفات سلوكًا افتراضيًّا، ولا يمكن أحيانًا تعطيل جميع الوظائف الافتراضيَّة. راجع صفحة الأحداث في مواصفة W3C للمزيد من المعلومات.

إن أعاد معالج الحدث القيمة false، فستُستدعى event.stopPropagation()‎ و event.preventDefault()‎ تلقائيًّا. يمكن أيضًا تمرير القيمة false للوسيط handler كاختصارٍ للشكل function(){ return false; }‎. بناءً على ذلك، يربط الشكل ‎$( "a.disabled" ).on( "click", false );‎ معالج الحدث بجميع الروابط ذات الصنف "disabled" الذي يمنع المستخدم من تتبع الروابط عندما يضغط عليها، ويوقف انتشار الحدث أيضًا.

عندما تستدعي jQuery معالج حدثٍ، فتشير الكلمة المحجوزة this إلى العنصر الذي وقع عليه الحدث. في الأحداث المرتبطة مباشرةً، يكون this العنصر الذي رُبط به الحدث؛ أمَّا في الأحداث المفوَّضة، يكون this العنصر الذي طابق المحدِّد selector. (لاحظ أنَّ this قد لا تكون أحيانًا مساويةً إلى event.target إن انتشر الحدث من عنصرٍ سليلٍ). لإنشاء كائن jQuery من العنصر الذي أشار إليه this لاستعماله مع توابع jQuery، استعمل ‎$( this )‎.

تمرير الوسيط data إلى معالج الحدث

إن أعطيت قيمة الوسيط data في التابع ‎.on()‎ ولم تكن null أو undefined، فستُمرَّر تلك القيمة إلى معالج الحدث في الخاصِّيَّة event.data كلَّ مرةٍ يُستدعَى فيها الحدث. يمكن استخدام أيَّ نوعٍ مع الوسيط data، ولكن إن استُخدمت سلسلة نصية (string)، فيجب أن يُعطى المعامل selector أو تكون قيمته null؛ وبذلك، لا يمكن أن يفهم المحدِّد قيمة الوسيط data خطأً. ينصح بشدة استعمال كائن عادي Object، لذا يمكن تمرير قيم متعدِّدة كخاصِّيَّات.

بدءًا من الإصدار jQuery 1.4، أصبح بالإمكان ربط معالج الحدث نفسه بالعنصر عدَّة مرات. هذا مفيد خصوصًا عندما تستخدم الخاصِّيَّة event.data، أو عندما تبقى بيانات فريدة أخرى في تعبير مغلق (closure) حول دالة معالج الحدث. انظر إلى الشيفرة التالية مثلًا:

function greet( event ) {
  alert( "مرحبًا " + event.data.name );
}
$( "button" ).on( "click", {
  name: "محمد"
}, greet );
$( "button" ).on( "click", {
  name: "عبد الله"
}, greet );

ستولد هذه الشيفرة تنبيهين مختلفين عند الضغط على الزر.

يمكنك أيضًا تمرير بياناتٍ إلى معالج الحدث في التابع ‎.on()‎، بدلًا من الوسيط data أو بالإضافة إليه، باستعمال الوسيط الثاني في التابع ‎.trigger()‎ أو التابع ‎.triggerHandler()‎. تُمرَّر البيانات المعطاة في هذه الطريقة إلى معالج الحدث كمعاملاتٍ إضافية بعد الكائن event. إن مُرَّرت مصفوفة (array) إلى الوسيط الثاني في التابع ‎.trigger()‎ أو التابع ‎.triggerHandler()، فسيُمثِّل كل عنصرٍ في المصفوفة معاملًا وحيدًا ويُمرَّر إلى معالج الحدث.

أداء الحدث (Event performance)

في أغلب الحالات، هنالك أحداثٌ تقع بشكل غير متكرر مثل الحدث click ولا يؤخذ موضوع الأداء حينئذٍ بالحسبان. من جهةٍ أخرى، هنالك أحداث تقع بشكل متكرر جدًا مثل الحدث mousemove أو الحدث scroll التي يمكن أن تُطلَق عشرات المرات في ثانيةٍ واحدةٍ، ويصبح من الضروري في مثل هذه الحالات التقليل من استعمال مثل هذه الأحداث قدر الإمكان. يزيد الأداء عمومًا بتقليل كمية العمل الذي ينجزه معالج الحدث، أو تخزين المعلومات التي يحتاجها معالج الحدث بدلًا من إعادة حسابها، أو الحد من عدد مرات تحديث الصفحة الفعليَّة من خلال استعمال setTimeout.

يمكن أن يؤدي ربط معالجات حدث مفوَّضة عديدة بالقرب من أعلى شجرة الصفحة إلى تقليل الأداء بشكل كبير. في كل مرة يقع فيها الحدث، يجب على jQuery أن توازن بين جميع المحدِّدات لجميع الأحداث المرتبطة من ذلك النوع وكل عنصر واقع على طول المسار الذي يمتد من العنصر الذي أطلق الحدث إلى أعلى الصفحة (العنصر document). للحصول على أفضل أداء، يُنصح بربط الأحداث المفوَّضة بالعنصر الأقرب إلى العناصر المستهدفة قدر المستطاع، وبتجنب الإفراط باستعمال document أو document.body مع الأحداث المفوَّضة في الصفحات الكبيرة.

تعالج jQuery المحدِّدات البسيطة التي من الشكل tag#id.class بسرعة كبيرة عندما تُستعمل لترشيح الأحداث المفوَّضة، لذا تتصف المحددات ‎#myForm، و a.external، و button بسرعتها الكبيرة. بينما تكون الأحداث المفوَّضة التي تستعمل محدِّدات أكثر تعقيدًا، خصوصًا الهرمية منها، أبطأ بكثير بالرغم من أنَّها لا تزال سريعة كفاية لأغلب التطبيقات. يمكن تجنب المحدِّدات الهرمية (hierarchical selectors) غالبًا عبر ربط معالج الحدث بعنصر مناسب في الصفحة ببساطة. على سبيل المثال، استعمل عوضًا عن الشكل ‎$( "body" ).on( "click", "#commentForm .addNew", addComment )‎ الشكل ‎$( "#commentForm" ).on( "click", ".addNew", addComment )‎.

ملاحظات إضافية

توجد توابع مختصرة لبعض الأحداث مثل ‎.click()‎ التي تُستعمَل لربط أو استدعاء معالجات الحدث. للاطلاع على القائمة الكاملة لهذه التوابع، انظر إلى التصنيف events.

كان يستعمل الاسم "hover" اختصارًا للعبارة "mouseenter mouseleave" إلا أنَّه أهمل في الإصدار jQuery 1.8، وحذف في الإصدار 1.9. وكان يربط معالج حدث وحيد من أجل هذين الحدثين ثمَّ يفحص معالج الحدث الخاصِّيَّة event.type لتحديد إن كان الحدث هو mouseenter أم mouseleave. لا تخلط بين hover الذي هو اسم لحدث زائف (pseudo-event-name) وبين ‎.hover()‎ الذي هو تابع ويقبل دالة واحدة أو دالتين.

يتطلب نظام الأحداث الخاص في jQuery أن يسمح عنصر DOM بريط البيانات عبر خاصِّيَّة في العنصر، لذا يمكن تتبع تلك الأحداث وإيصالها. لا يمكن للعناصر object، و embed، و applet أن تربط البيانات، وبالتالي لا يمكن ربط أحداث jQuery بها.

صُنِّفَ الحدث focus والحدث blur في معايير W3C بأنَّها أحداث غير قابلة للانتشار (bubble)، ولكن jQuery عرَّفت الحدثين focusin و focusout القابلين للانتشار في جميع المتصفحات عوضًا عنهما. عند استعمال الحدث focus والحدث blur لربط معالجات حدث مفوَّض، تنشئ jQuery خريطة لجميع أسماء العناصر ثمَّ توصل الحدث على أنَّه focusin و focusout على الترتيب. يفضل للمزيد من وضوح وتناسق الشيفرة استعمال اسم نوع الحدث القابل للانتشار.

في جميع المتصفحات، لا تنتشر الأحداث load، و scroll، و error (مثل ربطها بالعنصر <img>). في المتصفح Internet Explorer 8 والإصدارات السابقة له، لا ينتشر الحدثان paste و reset أيضًا. بعض الأحداث غير مدعومة لاستعمالها في التفويض، ولكن يمكن استعمالها عندما يربط معالج الحدث مباشرةً بالعنصر الذي ولَّد الحدث.

يستعمل الحدث error في الكائن window وسائط غير قياسيَّة ويعيد قيمة تقليدية، لذا فهو غير مدعوم في jQuery. عوضًا عن ذلك، يمكن إسناد دالة معالج حدث إلى الخاصِّيَّة window.onerror مباشرةً.

تُضبط قائمة معالج الحدث لعنصرٍ عندما يُوصل الحدث أول مرة. لن تدخل عمليَّة إضافة معالجات حدث إلى العنصر الحالي أو إزالتها منه حيز التنفيذ حتى المرة التالية التي يعالج فيها العنصر. يمكن منع تنفيذ أية معالجات حدث إضافيَّة مرتبطة بالعنصر باستعمال event.stopImmediatePropagation()‎ ضمن معالج الحدث. على أية حال، هذا السلوك يتعارض مع المواصفة W3C events. لفهم هذه الحالة جيدًا، تفحص الشيفرة التالية:

var $test = $( "#test" );
 
function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}
 
function handler2() {
  console.log( "handler2" );
}
 
$test.on( "click", handler1 );
$test.on( "click", handler2 );

في هذه الشيفرة، سينفذ معالج الحدث hendler2 في جميع الأحوال للمرة الأولى، حتى ولو أُزيل باستعمال ‎.off()‎، ولن ينفذ مطلقًا في المرات القادمة عندما يُستدعَى فيها الحدث click.

أمثلة

إظهار محتوى الفقرة في تنبيه عند الضغط عليها:

$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});

تمرير بيانات إلى معالج الحدث التي حدِّدت في هذه الحالة باستعمال اسم:

function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

إلغاء وظيفة إرسال النموذج ومنع الحدث من الانتشار صعودًا باستعمال القيمة false:

$( "form" ).on( "submit", false );

تعطيل السلوك الافتراضي باستعمال ‎.preventDefault()‎:

$( "form" ).on( "submit", function( event ) {
 event.preventDefault();
});

منع الحدث submit من الانتشار باستعمال ‎.stopPropagation()‎ دون تعطيل إرسال النموذج:

$( "form" ).on( "submit", function( event ) {
 event.stopPropagation();
});

تمرير بيانات إلى معالج الحدث باستعمال الوسيط الثاني للتابع ‎.trigger()‎:

$( "div" ).on( "click", function( event, person ) {
 alert( "مرحبًا " + person.name );
});
$( "div" ).trigger( "click", { name: "محمد" } );

تمرير مصفوفة من البيانات إلى معالج الحدث باستعمال الوسيط الثاني للتابع ‎.trigger()‎:

$( "div" ).on( "click", function( event, salutation, name ) {
 alert( salutation + "، " + name );
});
$( "div" ).trigger( "click", [ "وداعًا", "أحمد" ] );

ربط أحداث مخصَّصة (موجودة في المتصفح) واستدعائها:

<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>on مثالٌ عن استعمال التابع</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>هذه الفقرة مربوط بها حدث مخصص</p>
<button>استدعاء الحدث المخصص</button>
<span style="display:none;"></span>
 
<script>
$( "p" ).on( "myCustomEvent", function( event, myName ) {
  $( this ).text("مرحبًا" + myName);
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "اسمي = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
});
$( "button" ).click(function () {
  $( "p" ).trigger( "myCustomEvent", [ "أحمد" ] );
});
</script>
 
</body>
</html>

إضافة فقرة جديدة بعد فقرة سابقة عند الضغط عليها. لاحظ أنَّ ‎.on()‎ يسمح بربط الحدث click بأي فقرة -حتى الجديدة منها- لأنه يُعالج الحدث بوساطة العنصر <body> الموجود دومًا بعد أن ينتشر ويصل إليه:

<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>on مثالٌ عن استعمال التابع</title>
  <style>
  .test {
    color: #000;
    padding: .5em;
    border: 1px solid #444;
  }
  .active {
    color: #900;
  }
  .inside {
    background-color: aqua;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div class="test">اختبار العنصر div</div>
 
<script>
$( "div.test" ).on({
  click: function() {
    $( this ).toggleClass( "active" );
  }, mouseenter: function() {
    $( this ).addClass( "inside" );
  }, mouseleave: function() {
    $( this ).removeClass( "inside" );
  }
});
</script>
 
</body>
</html>

إظهار محتوى كل فقرة في مربع تنبيه كلما ضُغط عليها:

$( "body" ).on( "click", "p", function() {
 alert( $( this ).text() );
});

تعطيل السلوك الافتراضي للروابط في العنصر <a> باستعمال التابع ‎.preventDefault()‎:

$( "body" ).on( "click", "a", function( event ) {
 event.preventDefault();
});

ربط أحداث متعدِّدة (أحدها الحدث mouseenter والآخر هو mouseleave) بالعنصر ذاته:

$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
 $( this ).toggleClass( "active" );
});

مصادر

• صفحة التابع ‎‎.on()‎ في توثيق jQuery الرسمي.