Мне нужно больше деталей, чтобы предложить реальный код, но вы можете посмотреть Делегирование событий :
Делегирование событий относится к использованию одного прослушивателя событий на родительском объекте для прослушивания событий, происходящих с его дочерними элементами (или более глубокими потомками). Делегирование событий позволяет разработчикам быть скудными в применении слушателей событий, в то же время реагируя на события, когда они происходят по очень конкретным целям. Это оказывается ключевой стратегией для поддержания высокой производительности в насыщенных событиями веб-проектах, где создание сотен прослушивателей событий может быстро снизить производительность.
Быстрый базовый пример:
Скажем, у вас есть DIV с изображениями, например:
<div id="container">
<img src="happy.jpg">
<img src="sad.jpg">
<img src="laugh.jpg">
<img src="boring.jpg">
</div>
Но вместо 4 изображений у вас есть 100 или 200. Вы хотите связать событие щелчка с изображениями, чтобы действие X выполнялось, когда пользователь нажимает на него. Первый код большинства людей может выглядеть так:
$('#container img').click(function() {
performAction(this);
});
Это будет связывать дерьмо с обработчиками событий, которые снизят производительность вашей страницы. С делегированием событий вы можете сделать что-то вроде этого:
$('#container').click(function(e) {
if($(e.target)[0].nodeName.toUpperCase() == 'IMG') {
performAction(e.target);
}
});
Это будет привязывать только 1 событие к фактическому контейнеру, затем вы сможете выяснить, что было нажато, используя свойство target
события и соответствующим образом делегировать. Это по-прежнему немного болезненно, и вы можете добиться значительного улучшения производительности, не делая всего этого, используя функцию jQuery live
:
$('#container img').live('click', function() {
performAction(this);
});
Надеюсь, это поможет.