Как навесить событие на элемент если он выводиться динамически?

Question

[Владимир Голубь]

Как навесить событие на элемент, который выводиться динамически не загрязняя код функции вывода. То есть как проверить вывела функция элементы или нет ?
К примеру функция и событие

getMessages();

$('#listClients button').click(function(){
        event.preventDefault();
        console.log('1');
    });

Answer 1

[Алексей Уколов]

Если элемент #listClients у вас является родителем, в который вставляются новые элементы, то нужно делать так:

$('#listClients').on(
    'click',
    'button',
    function(){
        event.preventDefault();
        console.log('1');
    }
);

Это называется делегированием событий - вы вешаете обработчик на #listClients, который со страницы не исчезает и при каждом клике внутри себя он проверяет не был ли клик в действительности на button и если так - выполняет обработчик в нужном контексте.

Пример.

Answer 2

[WebDev]

В современных версия jquery так, как сказал Алексей Уколов , в старых $('#listClients button').live('click', function(){})

Comments

[Владимир Голубь]

а как понять в современных браузерах, jquery же подключаемая библиотека. А на сайте нет перечисления браузеров. По крайней мере я нигде не видел.

[WebDev]

Дело не в браузерах, дело в версии jquery. С версии 1.7 использовать live не нужно, а еще не нужно использовать .click(), все события нужно вешать через on() например on('click', ...) on('change', ...) и тп. Всегда пишите так. А live - это для справки, так уже не пишут, но если где то увидите, чтоб не путало

[Владимир Голубь]

kirill-93: ок, спасибо за разьеснение