תיאור: מצרף מטפל של אירוע אחד או יותר עבור כל האלמנטים, שתואמים לבחירה, עכשיו או בעתיד, מבוסס על סט ספציפי של אלמנטים שורש.
.delegate( selector, eventType, handler )
הוספה בגרסה: 1.4.2
selector
סלקטור, עבור סינון אלמנטים שמפעילים אירוע.
eventType
מחרוזת המכילה אחד או יותר סוגי אירוע של
JavaScript,
כמו "click" או "keydown,"
או שמות אירוע מותאם אישית.
handler
פונקציה לביצוע בזמן שאירוע מופעל.
.delegate( selector, eventType, eventData, handler )
הוספה בגרסה: 1.4.2
selector
סלקטור, עבור סינון אלמנטים שמפעילים אירוע.
eventType
מחרוזת המכילה אחד או יותר סוגי אירוע של
JavaScript,
כמו "click" או "keydown,"
או שמות אירוע מותאם אישית.
eventData
מפה של נתונים שתועבר למטפל אירוע.
handler
פונקציה לביצוע בזמן שאירוע מופעל.
משלחת היא אלטרנטיבה לשימוש בשיטה .live(),
מאפשרת עבור אירוע מקושר משלחת אלמנטים ספציפיים של
DOM.
לדוגמה, קוד משלחת הבא:
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
שווה לקוד הבא נכתב באמצעות .live():
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
ראו גם שיטה .undelegate()
עבור מחיקה של מטפל אירוע, שהוסף ב-
.delegate().
דוגמאות
דוגמה 1
לחצו על הפסקה כדי להוסיף עוד אחת. שימו לב.delegate() מצרף אירוע לחיצה על כל הפסקאות - וגם על חדשות.
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
דוגמה 1 - קוד מלא:
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
});
</script>
</head>
<body>
<p>Click me!</p>
<span></span>
</body>
</html>
דוגמה 2
כדי להציג את הטקסט של כל פיסקה בתיבת התראה בכל פעם שהוא נלחץ:
$("body").delegate("p", "click", function(){
alert( $(this).text() );
});
דוגמה 3
כדי לבטל את פעולת ברירת המחדל, ולמנוע ממנה לבעבע, תחזירו false:
$("body").delegate("a", "click", function() { return false; })
דוגמה 4
כדי לבטל רק את פעולת ברירת המחדל באמצעות השיטה preventDefault.
$("body").delegate("a", "click", function(event){
event.preventDefault();
});
דוגמה 5
גם ניתן לקשר אירועי משתמש.דוגמה 5 - קוד מלא:
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
span { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("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>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
</body>
</html>
האם מידע זה היה מועיל?
