Ранее я упоминал, что метод bind добавляет обработчики событий только к тем элементам, которые на момент его действия уже существуют
в структуре DOM. При добавлении новых элементов, например, с помощью метода append их события не будут обрабатываться.
Но jQuery предоставляет специальный метод delegate, который позволяет создать зарегистрировать обработчики и для будущих элементов,
которых еще не в структуре DOM. Этот метод имеет следующие варианты использования:
delegate('селектор','событие', обработчик_события): добавляет обработчик для события. Для фильтрации элементов, для которых добавляется обработчик,
используется селектор.
delegate('селектор','событие', данные_события, обработчик_события): то же самое, что и в предыдущем случае, плюс параметр для передачи данных события в объект Event (e.data)
Применение метода delegate:
<button>Жми1</button>
<button>Жми2</button>
<script type="text/javascript">
$(function(){
$('body').delegate('button','click', function(e){
$(this).css('color', 'red');
alert('Обработчик для кнопки: '+$(this).text());
});
$('body').append('<button>Жми3</button>');
});
</script>
Здесь для всех элементов button, находящихся в элементе body, добавляется обработчик нажатия. И несмотря на то, что уже после этого
добавляется новая кнопка, для нее также будет срабатывать обработчик.
Также мы можем отменить регистрацию обработчика события с помощью метода undelegate:
$('body').undelegate('button','click');
Метод on был введен в jQuery 1.7 и во многом является заменой методу delegate и имеет аналогичное действие. Он имеет похожие формы использования:
on('событие', 'селектор', обработчик_события)
on('событие', 'селектор', данные_события, обработчик_события)
По сути по сравнению с методом delegate в данном случае меняются лишь параметры селектора и события:
$('body').on('click', 'button', function(e){
$(this).css('color', 'red');
alert('Обработчик для кнопки: '+$(this).text());
});
Для отмены регистрации обработчиков события можно использовать метод off:
// удаление обработчиков события click для кнопок
$('body').off('click','button');
// удаление всех обработчиков для элементов внутри тега body
$('body').off();