.delegate( selector, eventType, handler(eventObject) )

Устанавливает обработчик события на выбранные элементы страницы, подходящими под селектор. Обработчик будет действовать и на элементах, появившихся после его установки.

  • version added: 1.4.2.delegate( selector, eventType, handler(eventObject) )

    selector 

    Тип: Строка 

    Селектор для фильтрации элементов страницы. 


    eventType

    Тип: Строка

    Названия типов JavaScript событий, такие как "click", "keydown" или собственное событие. 


    handler(eventObject)

    Тип: Функция

    Функция, которая запустится, как только наступит указанное событие.

  • version added: 1.4.2.delegate( selector, eventType, eventData, handler(eventObject) )

    selector 

    Тип: Строка 

    Селектор для фильтрации элементов страницы. 


    eventType 

    Тип: Строка 

    Названия типов JavaScript событий, такие как "click", "keydown" или собственное событие. 


    eventData 

    Тип: Объект 

    Объект с данными, который будет передан в метод-обработчик. 


    handler(eventObject) 

    Тип: Функция 

    Функция, которая запустится, как только наступит указанное событие.

  • version added: 1.4.3.delegate( selector, events )

    selector 

    Тип: Строка 

    Селектор для фильтрации элементов страницы. 


    events 

    Тип: Объект 

    Объект с событиями или функциями.

Начиная с jQuery 1.7, метод .delegate() можно заместить методом .on(). При использовании более ранних версий, рекомендуется использовать .deligate(). Разница между данными двумя методами не очень большая:

// 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" );
});

Для того чтобы убрать обработчики событий используйте метод .undelegate().

Примеры

Пример: Клик на параграф для добавления нового параграфа. Заметьте, что метод .delegate() прикрепляет обработку событий и для новых элементов страницы.

<!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="http://code.jquery.com/jquery-1.9.1.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>

Демо:

Пример: При клике по параграфу, показать его текст в блоке alert:

$( "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="http://code.jquery.com/jquery-1.9.1.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" ).click(function() {
  $( "p" ).trigger( "myCustomEvent" );
});
</script>

</body>
</html>

Демо:

^ Наверх ^