Вопрос по обработке DOM-элементов, добавленных динамически с помощью AJAX

ой да ладно, для обработки полученых елементов после формирования дум дерева вам поможет поставить обработчик событий - on http://jquery.page2page.ru/index.php5/On

TOVSTUN, огромное спасибо. Я сегодня уже игрался с ним, но видимо не так подошел к делу. Спасибо!

А почему нельзя то? Или в json приходит html? Нифега непонятно =( Хоть пример бы получить, где нельзя обработать данные...

Давайте пример, посмотрим

$(document).on('click','td', function(){

}

Вот так приходилось обрабатывать клик по ячейке в динамически создаваемой таблице.

Теперь почти 700 строк кода на JQuery приходится переводить на backbone. Посмотрите сразу в сторону фреймворков) Может еще не поздно облегчить себе будущее)

Первое выражение - true, второе - лошь.

Скорее всего у вас как любого жиквериста принято развешивать события на всех членов конгресса. Сделайте так

var func=function(e){

    var el=e.target;

    if(el!==this){

       /* делаем полезное */

    }

};



parent_element.addEventListener('click',func);

Прочитайте про делегирование событий в js вообще и в jquery в частности. Суть в том что когда у вас в контейнере не один элемент, а непонятно сколько нужно отлавливать событие клика (или что-то еще) не на каждом элементе, а только на родителе.

Когда кликаете по какому-то элементу событие передается дальше родителям вплоть до body. Там можно проанализировать кто отдал событие и отреагировать на него. В этом случае у вас значительно снижаются накладные расходы, меньше вероятность утечки памяти, и не нужно знать был ли элемент статическим или динамическим.

Пример

<div id="parent">
  <div class="tracked">1</div>
  <div class="tracked">2</div>
  ................................................
  <div class="nonTracked">3</div>
</div>


$('#parent').click(function(e) { // cлушаем предка, любого, можно слушать например 'body'
  var who = e.target; // определяем откуда пришло событие
  if (who.hasClass('tracked')) { // определяем это то за чем следим или нет. В данном случае следим за элементом с классом tracked
   alert(who.text());
  }  
});

Раньше все болели jquery, теперь все болеют backbone :( Ну вот нахрена в данном случае приплетать backbone или что-то еще? Вы еще ExtJS присоветуйте. Там тоже MV* есть

Отнюдь. Глава про делегирование событий есть в любом учебнике по jquery и это было доступно в самых первых версиях.

У жикверистов нет учебников, у них - культура. Они смотрят как делают и повторяют те же движения. В нативном скрипте пришлось бы написать больше и возник бы мотив подумать, а стоит ли трясти. В либе думать не надо, ибо обж фор ич функтион и вперде.

Что еще за делегирование? В смысле нет таких терминов в природе, а жикверные для жикверистов.

---------- Добавлено 11.06.2015 в 11:22 ----------

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

Вот не надо обощать. Бибо и Кац - наше все.

Отнюдь.

1. Смысл думать возникает каждый раз когда все начинает тормозить из-за 100 одинаковых обработчиков или когда по недомыслию вместо hover юзается mouseover

2. Писать больше нужно только плохим программистам. Хорошие пишут свой jquery :)Ну ей-ей, лениво же писать document.getElementById. Проще самый минимум выделить в отдельную библиотечку и естественно совпадающую по синтаксису с jquery. Или на худой конец взять что-то из microlib

Читаем современный учебник Javascript Ильи Кантора:

Всплытие событий позволяет реализовать один из самых важных приёмов разработки — делегирование. Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому — мы ставим один обработчик на их общего предка. Из него можно получить целевой элемент event.target, понять на каком именно потомке произошло событие и обработать его.

Кстати, не обязательно сегрегировать по css. elem.getAttribute('foo'); выдаст значение атрибута foo="one" как и любого другого произвольного.

---------- Добавлено 11.06.2015 в 12:11 ----------

Ayavryk,

Прикол, жиквери не естественный в принципе. Это же тупо объект в который засунут элемент как проперть. И кстати у жиквери нет идентификации по id, только по css.

Кантор-программист - молодец, а вы не поняли что у него речь о практике программирования, о приемах, а не о терминах языка.

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

Поэтому "делегирование" - колхоз. Грамотный программист знает про бублинг и капчуринг, про фазы и дерево по которому они звенят. Дополнительных терминов не требуется. Точно так же без делегирования можно получить target и что-то сделать дополнительно с этой инфой. Потому что хтлм это дерево, а деревья всегда самоподобны. Они - фрактал и бифуркация.

---------- Добавлено 11.06.2015 в 12:15 ----------

Можно подумать что повесив прерывание на ячейку таблицы, вам всегда хватит this. В том и затык что чаще всего приходится шерстить и target, и сделав небольшой бублинг в своей голове вы понимаете что лучшим местом куда воткнуть слушателя - будет либо сама таблица, либо ее туловище.

---------- Добавлено 11.06.2015 в 12:29 ----------

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

Например рендерится вот так

<nav id="fast-res">

<a h="url-1">Результат поиска 1</a>

<a h="url-1">Результат поиска 1</a>

<a h="url-1">Результат поиска 1</a>

<a h="url-1">Результат поиска 1</a>

</nav>

Куда тут еще можно нажать кроме ссылки и самого родителя если css все-таки проворонит? Чтобы css ворон не считал, не используйте margin'ы - только padding'и. + box-sizing:border-box и будет вам щасье :)

Тем не менее в функции: if(url=e.target.getAttribute('h')){} даст бетонную гарантию попадания в цель.