عرض مصدر jQuery/delegate

<noinclude>{{DISPLAYTITLE:التابع <code>‎.delegate()‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎</code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery}}</noinclude>
== <code>‎.delegate( selector, eventType, handler )‎</code> ==
حُذِف مع الإصدار: [http://api.jquery.com/category/version/3.0 3.0].

=== القيمة المعادة ===
يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]]. 

=== الوصف ===
يُرفق هذا التابع معالج بأحد الأحداث أو أكثر لكافة العناصر التي تطابق المُحدِد، الآن أو في المستقبل، استنادًا إلى مجموعة محددة من عناصر الجذر.

=== <code>‎.delegate( selector, eventType, handler )‎</code> ===
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4.2 1.4.2].

==== <code>selector</code> ====
سلسلة نصية تُحدد ترشيح العناصر التي تبدأ الحدث من النوع [[JavaScript/String|String]].

==== <code>eventType</code> ====
سلسلة نصية تحتوي على واحد أو أكثر من أنواع أحداث JavaScript مفصولة بمسافات، مثل "<code>[[jQuery/click|click]]</code>" أو "<code>[[jQuery/keydown|keydown]]</code>" أو أسماء أحداث مخصصة.

==== <code>handler</code> ====
دالة حدث <code>Function( Event eventObject )‎</code> تُنفَّذ في وقت تشغيل الحدث.

=== <code>‎.delegate( selector, eventType, eventData, handler )‎</code> ===
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4.2 1.4.2].

==== <code>selector</code> ====
سلسلة نصية تُحدد ترشيح العناصر التي تبدأ الحدث من النوع [[JavaScript/String|String]].

==== <s>eventType</s> ====
سلسلة نصية تحتوي على واحد أو أكثر من أنواع أحداث JavaScript مفصولة بمسافات، مثل "<code>[[jQuery/click|click]]</code>" أو "<code>[[jQuery/keydown|keydown]]</code>" أو أسماء أحداث مخصصة.

==== <code>eventData</code> ====
كائن يحتوي على البيانات التي ستُمرر إلى مداول الحدث، ويمكن أن يكون من أي نوع من أنواع JavaScript.

==== <code>handler</code> ====
دالة حدث <code>Function( Event eventObject )‎</code> تُنفَّذ في وقت تشغيل الحدث.

=== <code>‎.delegate( selector, events )‎</code> ===
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4.3 1.4.3].

==== <code>selector</code> ====
سلسلة نصية تُحدد ترشيح العناصر التي تبدأ الحدث من النوع [[JavaScript/String|String]].

==== <code>events</code> ====
كائن بسيط من النوع <code>[[JavaScript/PlainObject|PlainObject]]</code> لواحد أو أكثر من أنواع الأحداث والدوال لتنفيذها.

أُوقف التابع ‎.<code>delegate()‎</code> اعتبارًا من إصدار jQuery 3.0. وحل محله التابع ‎<code>[/jQuery/on .on()]</code>‎ منذ الإصدار jQuery 1.7، لذلك كان من المحبذ عدم إستعماله. ومع ذلك، بالنسبة للإصدارات السابقة، تظل الوسيلة الأكثر فعالية لاستخدام تفويض الحدث. مزيد من المعلومات حول ربط الحدث والتفويض في صفحة توثيق التابع ‎<code>[/jQuery/on .on()]</code>‎ . بشكل عام، هذه هي القوالب المُكافِئة للتابعَين:<syntaxhighlight lang="jquery">
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );
</syntaxhighlight>على سبيل المثال ، الشيفرة البرمجية التالية للتابع ‎<code>.delegate()‎</code>:<syntaxhighlight lang="jquery">
$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});
</syntaxhighlight>تعادل الشيفرة التالية المكتوبة باستخدام التابع ‎<code>[/jQuery/on .on()]</code>‎ :<syntaxhighlight lang="jquery">
$( "table" ).on( "click", "td", function() {
  $( this ).toggleClass( "chosen" );
});
</syntaxhighlight>لإزالة الأحداث المرفقة مع التابع ‎.delegate()‎، راجع التابع <code>[[jQuery/undelegate|‎.undelegate()‎‎]]</code>، وهو يُمرر بيانات الأحداث ويعالجها بنفس الطريقة التي يعمل بها التابع ‎<code>[/jQuery/on .on()]</code>‎.

=== ملاحظات إضافية ===
نظرًا لأن التابع <code>[[jQuery/live|‎.live()‎]]</code> يعالج الأحداث بمجرد نشرها إلى أعلى المستند، لا يمكن إيقاف نشر أحداث live. وبالمثل، فإن الأحداث التي يعالجها التابع ‎<code>.delegate()</code>‎ سوف تنتشر إلى العناصر المفوَّضَة؛ ستُنفَّذ بالفعل معالجات الأحداث المرتبطة بأي عناصر تحتها في شجرة DOM في الوقت الذي يُستدعى فيه معالج الحدث المفوَّض. لذلك، قد تمنع هذه المعالجات المعالجَ المفوَّض من التشغيل عن طريق استدعاء <code>[[jQuery/event/stopPropagation|event.stopPropagation()]]</code>‎ أو إعادة <code>false</code>.

=== أمثلة ===
انقر فقرة لإضافة أخرى. لاحظ أن ‎<code>.delegate()‎‎</code> يُرفِق معالج حدث click مع كافة الفقرات، حتى الجديدة.<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delegate demo</title>
  <style>
  p {
    background: yellow;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
  }
  p.over {
    background: #ccc;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Click me!</p>
 
<span></span>
 
<script>
$( "body" ).delegate( "p", "click", function() {
  $( this ).after( "<p>Another paragraph!</p>" );
});
</script>
 
</body>
</html>
</syntaxhighlight>لعرض نص كل فقرة في مربع تنبيه عند النقر عليه:<syntaxhighlight lang="jquery">
$( "body" ).delegate( "p", "click", function() {
  alert( $( this ).text() );
});
</syntaxhighlight>لإلغاء إجراء افتراضي ومنعه من التزايد، يعيد خطأ:<syntaxhighlight lang="jquery">
$( "body" ).delegate( "a", "click", function() {
  return false;
});
</syntaxhighlight>لإلغاء الإجراء الافتراضي فقط باستخدام التابع <code>preventDefault</code>:<syntaxhighlight lang="jquery">
$( "body" ).delegate( "a", "click", function( event ) {
  event.preventDefault();
});
</syntaxhighlight>يمكن ربط الأحداث المخصصة أيضًا.<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delegate demo</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
 
<script>
$( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
  $( this ).text( "Hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
});
$( "button" ).click(function() {
  $( "p" ).trigger( "myCustomEvent" );
});
</script>
 
</body>
</html>
</syntaxhighlight>

== مصادر ==
* [http://api.jquery.com/delegate/ صفحة التابع ‎.delegate()‎‎ في توثيق jQuery الرسمي].
[[تصنيف:jQuery]]
[[تصنيف:jQuery Method]]
[[تصنيف:jQuery Event Handler Attachment]]
[[تصنيف:jQuery Deprecated]]