change()

.change( handler(eventObject) )

מחזירה: jQuery

תיאור: מקשר מטפל אירוע "change" JavaScript או מפעיל אירוע הזה על אלמנט.

.change( handler(eventObject) )

הוספה בגרסה: 1.0

handler(eventObject)

פונקציה

פונקציה מופעלת כל פעם, כאשר מופעל אירוע.

.change( )

הוספה בגרסה: 1.0

.change( [ eventData ], handler(eventObject) )

הוספה בגרסה: 1.4.3

eventData

מפה

המפה של הנתונים שתעבור למטפל האירוע.

handler(eventObject)

פונקציה

פונקציה לביצוע כל פעם שאירוע מופעל.

שיטה הזו היא קיצור של .bind('change', handler) בוריאציה הראשונה, ו- .trigger('change') בשניה.

אירוע change נשלח לאלמנט, כאשר ערך שלו משתנה. אירוע הזה מוגבל עבור אלמנטים <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.');
});

עכשיו, כאשר אופציה שניה נבחרה משדה בחירה, תוצג הודעה. היא גם תוצג, אם אנחנו נשנה טקסט בשדה, ואחרי זה נלחץ עם עכבר במקום אחר. אם שדה מאבד פוקוס ללא שינוי תוכן, אירוע לא יופעל. אנחנו יכולים להפעיל אירוע ידנית, כאשר אלמנט אחר נלחץ:

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

אחרי ביצוע קוד הזה, לחיצה על Trigger the handler תציג גם הודעה. הודעה תוצד פעמיים, מכיוון שמטפל קשור לאירוע change של שני אלמנטים של הטופס.

החל מ- jQuery 1.4 אירוע change מרחיב, ועובד זהה בכל הדפדפנים, כולל Internet Explorer.

דוגמאות

דוגמה 1

באירוע change מופעלת פונקציה, שמקבלת טקסט של כל אופציה שנבחרה ורושמת אותו לתוך ה- div.

    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

באירוע change מופעלת פונקציה, שמקבלת טקסט של כל אופציה שנבחרה ורושמת אותו לתוך ה- div.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();
  });
  </script>
  <style>
  div { color:red; }
  </style>
</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>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

הוספה בדיקת תקינות אלמנטים של קלט טקסט :

$("input[type='text']").change( function() {
  // check input ($(this).val()) for validity here
});

האם מידע זה היה מועיל?

כן לא

change()

.change( handler(eventObject) )

.change( handler(eventObject) )

.change( )

.change( [ eventData ], handler(eventObject) )

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

תגובות