jQuery « события на сгенерированные элементы

Всем привет. У меня такой вопрос:
имеется див, например, такой:/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<div class="myclass">Некий текст</div>
 
, имеется также обработчик события на javascript:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

$('.myclass').click(function() { alert('i work'); })
 

Далее генерируются еще дивы (через $('').html()), так что получается такая последовательность:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<div class="myclass">Некий текст</div>
<div class="myclass">Некий текст2</div>
<div class="myclass">Некий текст-3</div>
 

Проблема следующая - при клике по любому из сгенерированных дивов обработчик события не запускается.
В чем тут может быть дело?
0
jquery событие

1 ответов

у jQuery есть специально для таких случаев метод live


$('.myclass').live('click', function() { alert('i work'); });
 
3

Дело в том, что события, которые "навешиваются" на определенные элементы DOM определены селектором только в тот момент, когда идет процесс "навешивания". Представьте себе роту солдат, в ней три Иванова. Пришли наградные листки. На выкрик Иванов вышел только один, потому что остальные 2 страдали диареей. Но минут через 10 встали в строй. У кого будут наградные листки?

Вооот.

Поэтому при определенном изменении структуры DOM следует повторно запускать данную функцию выборки из DOM. Но еще будет правильней навешивать ее перед добавлением этих элементов.


el = document.createElement('DIV');
$(el)
   .appendClass('myClass')
   .text('Некий текст')
   .click(function(){ alert('EVACUATE!!! ACHTUNG!!! NUCLEAR!!!');});

//...
$('.someDivContainer').append(el);
 
1