Как навесить событие в JavaScript на элемент, который был создан динамически

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

Итак, берем JQuery, необходимо использовать конструкции типа .live(), .on() или .delegate(). Вот пример:

$('<div id="paste_bur" style="padding:10px 10px 10px 0;">\n\
    <input type="button" value="A">\n\
    <input type="button" value="B">\n\
    <input type="button" value="C">\n\
  </div>').insertAfter('#word-editing');

/* Вариант 1: */ 
$('#paste_bur input[type="button"]').live('click', function() {
  alert($(this).attr('value'));
});

/* Вариант 2: */      
$("body").delegate('#paste_bur input[type="button"]', "click", function () {
  alert($(this).attr('value'));
});

Элементарно.

Опубликовано 26-01-2015 в 17:43


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты