.delegate( selector, eventType, handler )Возвращает: jQueryверсия устаревшая: 3.0
Описание: Привязывает обработчик к одному или нескольким событиям для всех элементов, соответствующих селектору, как сейчас, так и в будущем, на основе определённого набора корневых элементов.
-
версия добавлена: 1.4.2.delegate( selector, eventType, handler )
- selectorТип: СтрокаСелектор для фильтрации элементов, которые вызывают событие.
- eventTypeТип: СтрокаСтрока, содержащая одно или несколько разделенных пробелом типов событий JavaScript, таких как "click" или "keydown", или имена пользовательских событий.
- handlerФункция, которая выполняется в момент срабатывания события.
-
-
версия добавлена: 1.4.2.delegate( selector, eventType, eventData, handler )
- selectorТип: СтрокаСелектор для фильтрации элементов, которые вызывают событие.
- eventTypeТип: СтрокаСтрока, содержащая одно или несколько разделенных пробелом типов событий JavaScript, таких как "click" или "keydown", или имена пользовательских событий.
- eventDataТип: Любой типОбъект, содержащий данные, которые будут переданы обработчику события.
- handlerФункция, которая выполняется в момент срабатывания события.
-
-
версия добавлена: 1.4.3.delegate( selector, events )
Начиная с jQuery 3.0, .delegate() устарел. Он был заменён методом .on() начиная с jQuery 1.7, поэтому его использование уже не рекомендуется. Однако для более ранних версий он остаётся наиболее эффективным способом использования делегирования событий. Более подробная информация о привязке и делегировании событий находится в методе .on(). В общем случае, это эквивалентные шаблоны для двух методов:
// jQuery 1.4.3+ $( elements ).delegate( selector, events, data, handler ); // jQuery 1.7+ $( elements ).on( events, selector, data, handler );
Например, следующий .delegate() код:
$( "table" ).delegate( "td", "click", function() {
$( this ).toggleClass( "chosen" );
}); эквивалентен следующему коду, написанному с использованием .on():
$( "table" ).on( "click", "td", function() {
$( this ).toggleClass( "chosen" );
}); Чтобы удалить привязанные события с помощью delegate(), см. метод .undelegate().
Передача и обработка данных событий происходит так же, как и для .on().
Дополнительные примечания:
- Поскольку метод
.live()обрабатывает события после их распространения до верха документа, остановить распространение событий live невозможно. Аналогично, события, обрабатываемые.delegate(), будут распространяться на элементы, которым они делегированы; обработчики событий, привязанные к любым элементам ниже его в дереве DOM, будут уже выполнены к моменту вызова делегированного обработчика событий. Таким образом, эти обработчики могут предотвратить срабатывание делегированного обработчика, вызвавevent.stopPropagation()или вернувfalse.
Примеры:
Нажмите на абзац, чтобы добавить ещё один. Обратите внимание, что .delegate() привязывает обработчик события click ко всем абзацам - даже новым.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>delegate demo</title>
<style>
p {
background: yellow;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
p.over {
background: #ccc;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
$( "body" ).delegate( "p", "click", function() {
$( this ).after( "<p>Another paragraph!</p>" );
});
</script>
</body>
</html> Демо:
Чтобы отобразить текст каждого абзаца в окне всплывающего сообщения при каждом его нажатии:
$( "body" ).delegate( "p", "click", function() {
alert( $( this ).text() );
}); Чтобы отменить стандартное действие и предотвратить его распространение вверх, верните false:
$( "body" ).delegate( "a", "click", function() {
return false;
}); Чтобы отменить только стандартное действие, используя метод preventDefault.
$( "body" ).delegate( "a", "click", function( event ) {
event.preventDefault();
}); Можно также привязывать пользовательские события.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>delegate demo</title>
<style>
p {
color: red;
}
span {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>
$( "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" ).on( "click", function() {
$( "p" ).trigger( "myCustomEvent" );
});
</script>
</body>
</html> 
