الفرق بين المراجعتين لصفحة: «jQuery/change»

مراجعة 18:05، 22 مايو 2018

`‎.change( handler )‎`

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

كائن jQuery.

الوصف

يُستخدَم التابع ‎.change()‎ في ربط مُعالِج الأحداث (event handler) لتغيير حدث JavaScript أو إطلاق هذا الحدث على عنصر ما.

`‎.change( handler )‎`

أضيفت في الإصدار: 1.0.

`handler`

دالة على الشكل ‎Function( Event eventObject )‎، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.

`‎.change( [eventData ], handler )‎`

أضيفت في الإصدار: 1.4.3.

`eventData`

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

`handler`

دالة على الشكل ‎Function( Event eventObject )‎، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.

`‎.change()‎`

أضيفت في الإصدار: 1.0.

لا يقبل هذا الشكل من التّابع أيّة وسائط.

يُعدُّ هذا التّابع اختصارًا للتابع ‎.on( "change", handler )‎ في أول شكلين له، وللتّابع ‎.trigger( "change" )‎ في شكله الثّالث.

يُرسَل الحدث change إلى العنصر عندما تتغيّر قيمته، ويكون هذا الحدث محدودًا لعناصر ‎<input>‎، و ‎<textarea>‎، و ‎<select>‎. يُطلَق هذا الحدث مباشرةً بالنسبة لمربّعات الاختيار ومربّعات التأشير وأزرار الانتقاء (radio buttons) عندما يختار المستخدم عن طريق الفأرة، ولكن يُؤجَّل بالنسبة لأنواع العناصر الأخرى حتى يفقد العنصر التركيز عنه.

لنأخذ مثال HTML التالي:

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">الخيار 1</option>
    <option value="option2">الخيار 2</option>
  </select>
</form>
<div id="other">
  إطلاق معالج الحدث
</div>

يُمكِن ربط مُعالِج الحدث إلى عنصر ‎<input>‎ ومربّع الاختيار:

$( ".target" ).change(function() {
  alert( "استًدعي معالج الأحداث للتابع .change()" );
});

عندما نختار الخيار الثاني الآن من القائمة المنسدلة، فستُعرَض رسالة التنبيه، وستُعرَض أيضًا إن غيّرنا النص في الحقل ثمّ ضغطنا بعيدًا عنه. إن فقد الحقل التركيز عنه بدون تغيير المحتوى فلن يُطلَق الحدث. لإطلاق الحدث يدويًّا استخدم التابع ‎.change()‎ بدون وسائط:

$( "#other" ).click(function() {
  $( ".target" ).change();
});

بعد تنفيذ هذه الشيفرة سيُعطينا الضغط على عبارة "إطلاق مُعالِج الحدث" رسالة التنبيه. ستُعرَض الرسالة مرتين بسبب ربط مُعالِج الأحداث مرتين مع الحدث change على كل من عنصري الحقل.

بدءًا من إصدار jQuery 1.4 ينتقل (bubble) الحدث change في متصفح Internet Explorer، وبالتالي يكون سلوكه متوافقًا مع الحدث في المتصفحات الحديثة الأخرى.

ملاحظة: لن يُطلِق تغيير قيمة عنصر <input> باستخدام JavaScript الحدث change، مثل تغييرها عبر التّابع ‎.val()‎.

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

لمّا كان التّابع ‎.change()‎ مُجرَّد اختصار للتابع ‎.on( "change", handler )‎، فمن الممكن إلغاء الحدث عبر استخدام ‎.off( "change" )‎.

أمثلة

إرفاق حدث change إلى عنصر الاختيار الذي يحصل على النص لكل خيار ويكتبه ضمن عنصر <div>، ثمّ يُطلِق الحدث لرسم النص المبدئي:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>مثال عن التّابع change</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<select name="sweets" multiple="multiple">
  <option>شوكولا</option>
  <option selected="selected">حلويات</option>
  <option>حلوى/option>
  <option selected="selected">كراميل</option>
  <option>كعك</option>
  <option>بسكويت</option>
</select>
<div></div>
 
<script>
$( "select" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .change();
</script>
 
</body>
</html>

لإضافة اختبار تحقّق لكافّة عناصر <input> النصيّة:

$( "input[type='text']" ).change(function() {
  // تحقّق من المُدخلات باستخدام $( this ).val()
});