one()

.one( eventType, [ eventData ], handler(eventObject) )

מחזירה: jQuery

תיאור: מצרף מטפל לאירוע עבור האלמנטים. המטפל מתבצע לכל היותר פעם אחת לכל אלמנט.

.bind( eventType, [ eventData ], handler(eventObject) )

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

eventType

מחרוזת

מחרוזת המכילה אחד או יותר סוגי אירועים, כמו למשל "click" או "submit," או שמות אירוע מותאמות אישית.

eventData

מפה

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

handler(eventObject)

פונקציה

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

שיטה הזו שווה ל- .bind(), חוץ מזה שמטפל משתחרר אחרי הפעלה שלו הראשונה. לדוגמה:

$('#foo').one('click', function() {
  alert('This will be displayed only once.');
});

אחרי ביצוע קוד, לחיצה על אלמנט עם מזהה Foo תציג הודעה. לחיצות הבאות לא יתנו דבר. קוד הזה שווה ל-:

$('#foo').bind('click', function(event) {
  alert('This will be displayed only once.');
  $(this).unbind(event);
});

במילים אחרות, קריאה מפורשת של .unbind() בתוך המטפלים הקשורים תתן בדיוק את אותו אפקט.

דוגמאות

דוגמה 1

מקשר אירוע click עם כל div

    var n = 0;
    $("div").one("click", function(){
      var index = $("div").index(this);
      $(this).css({ borderStyle:"inset",
                    cursor:"auto" });
      $("p").text("Div at index #" + index + " clicked." +
                  "  That's " + ++n + " total clicks.");
    });

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
    var n = 0;
    $("div").one("click", function(){
      var index = $("div").index(this);
      $(this).css({ borderStyle:"inset",
                    cursor:"auto" });
      $("p").text("Div at index #" + index + " clicked." +
                  "  That's " + ++n + " total clicks.");
    });
  });
  </script>
  <style>
  div { width:60px; height:60px; margin:5px; float:left;
        background:green; border:10px outset; 
        cursor:pointer; }
  p { color:red; margin:0; clear:left; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <p>Click a green square...</p>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

מציג הודעה alert עם טקסט של פסקה אחרי click על הפסקה, מופעל רק פעם אחד, נסו:

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

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
$("p").one("click", function(){
  alert( $(this).text() );
});
  });
  </script>
</head>
<body>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
  <div></div>
  <p>Click a paragraph...</p>
</body>
</html>

נסה זאת בעצמך

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

כן לא

one()

.one( eventType, [ eventData ], handler(eventObject) )

.bind( eventType, [ eventData ], handler(eventObject) )

דוגמאות

דוגמה 1

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

דוגמה 2

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

תגובות