jQuery 3.3

.change()




jquery

.change (معالج) العودة: jQuery

الوصف ؛: ربط معالج حدث بحدث جافا سكريبت "التغيير" ، أو تشغيل هذا الحدث على عنصر.

  • الإصدار المضاف: 1.0 .change (معالج)

    • معالج
      النوع: Function ( Event eventObject)
      هي وظيفة يتم تنفيذها في كل مرة يتم فيها تشغيل الحدث.
  • الإصدار المضاف: 1.4.3 .change ([eventData] ، معالج)

    • eventData
      النوع: Anything
      كائن يحتوي على بيانات سيتم تمريرها إلى معالج الحدث.
    • معالج
      النوع: Function ( Event eventObject)
      هي وظيفة يتم تنفيذها في كل مرة يتم فيها تشغيل الحدث.
  • الإصدار المضاف: 1.0 .change()

    • هذا التوقيع لا يقبل أي حجج.

هذه الطريقة هي اختصار لـ .on( "change", handler ) في أول .trigger( "change" ) ، و. .trigger( "change" ) في الثلث.

يتم إرسال حدث change إلى عنصر عندما تتغير قيمته. يقتصر هذا الحدث على مربعات <textarea> <input> و <textarea> و <select> . بالنسبة إلى مربعات التحديد ، ومربعات الاختيار ، وأزرار الاختيار ، يتم تشغيل الحدث فورًا عندما يقوم المستخدم بإجراء تحديد باستخدام الماوس ، ولكن بالنسبة لأنواع العناصر الأخرى ، يتم تأجيل الحدث إلى أن يفقد العنصر التركيز.

على سبيل المثال ، ضع في اعتبارك HTML:

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

يمكن ربط معالج الحدث بإدخال النص ومربع الاختيار:

$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

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

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

بعد تنفيذ هذه التعليمة البرمجية ، سيؤدي النقر فوق Trigger the handler أيضًا إلى تنبيه الرسالة. سيتم عرض الرسالة مرتين ، لأن المعالج قد تم ربطه بحدث change في كل من عناصر النموذج.

بدءًا من jQuery 1.4 ، تظهر فقاعات الأحداث المتغيرة في Internet Explorer ، وتتصرف باستمرار مع الحدث في المتصفحات الحديثة الأخرى.

ملاحظة: لن يؤدي تغيير قيمة عنصر إدخال باستخدام JavaScript ، باستخدام .val() على سبيل المثال ، إلى إطلاق الحدث.

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

  • نظرًا .change() طريقة .change() هي اختصار لـ .on( "change", handler ) ، يمكن .off( "change" ) باستخدام .off( "change" ) .

أمثلة:

يرفق حدث تغيير بالاختيار الذي يحصل على النص لكل خيار محدد ويكتبها في div. ثم يقوم بتشغيل الحدث للرسم النصي الأولي.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>change demo</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>Chocolate</option>
  <option selected="selected">Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</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[type='text']" ).change(function() {
  // Check input( $( this ).val() ) for validity here
});