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

12
Seredniy
На сайте с 17.03.2008
Offline
251
3476

Вопрос знатокам:

Есть список продуктов в бд. Пользователю дано поле ввода, где он пишет первые буквы продукта, а "живой поиск" ему подставляет варианты. Варианты подгружаются аяксом в формате json.

Так вот нужно чтобы при клике на нужный пользователю продукт (который появился в "выдаче"), этот продукт добавлялся в определенный список на этой же странице.

Но проблема в том, что обработать динамически-полученные данные (новые элементы ДОМ) - штатным способом jquery не выходит.

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

Я не прошу написать за меня код и т.д. - просто куда хоть копать с этим всем.Заранее спасибо!

Wordpress и другие CMS: правки, настройка, верстка и натяжка шаблонов, разработка сайтов "под ключ" (/ru/forum/1008050)
TOVSTUN
На сайте с 08.12.2008
Offline
111
#1

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

В Украине признаком смены Папы станет дым над Межигорьем. Цвет дыма не принципиален.
Seredniy
На сайте с 17.03.2008
Offline
251
#2

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

VHS
На сайте с 28.09.2007
Offline
142
VHS
#3
Seredniy:
Вопрос знатокам:

Есть список продуктов в бд. Пользователю дано поле ввода, где он пишет первые буквы продукта, а "живой поиск" ему подставляет варианты. Варианты подгружаются аяксом в формате json.

Так вот нужно чтобы при клике на нужный пользователю продукт (который появился в "выдаче"), этот продукт добавлялся в определенный список на этой же странице.

Но проблема в том, что обработать динамически-полученные данные (новые элементы ДОМ) - штатным способом jquery не выходит.

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

Я не прошу написать за меня код и т.д. - просто куда хоть копать с этим всем.Заранее спасибо!

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

Оптимизайка
На сайте с 11.03.2012
Offline
396
#4

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

⭐ BotGuard (https://botguard.net) ⭐ — защита вашего сайта от вредоносных ботов, воровства контента, клонирования, спама и хакерских атак!
K
На сайте с 23.12.2014
Offline
5
#5

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

}

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

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

WordPress для начинающих (http://belentsov.ru) Ваш личный помощник выполнит любую работу в ЛЮБОЕ время (http://www.work-zilla.com?ref=121253&sub=search)
K
На сайте с 03.06.2015
Offline
45
#6
Seredniy:


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

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

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


var func=function(e){
var el=e.target;
if(el!==this){
/* делаем полезное */
}
};

parent_element.addEventListener('click',func);
MYSQL PHP JS HTML CSS SEO TXT США СССР
Ayavryk
На сайте с 11.10.2003
Offline
209
#7

Прочитайте про делегирование событий в 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());
}
});
kreolx:
приходится переводить на backbone

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

kostyanet:
Скорее всего у вас как любого жиквериста

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

Тынгыр, мынгыр, комсомол (http://erum.ru). Ехари, ехари, (жалобно) аяврик. /народная тунгусская песня/
K
На сайте с 03.06.2015
Offline
45
#8

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

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

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

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

Ayavryk
На сайте с 11.10.2003
Offline
209
#9
kostyanet:
У жикверистов нет учебников

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

kostyanet:
В нативном скрипте пришлось бы написать больше и возник бы мотив подумать

Отнюдь.

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

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

kostyanet:
Понял, это не делегирование конечно же, а уровень абстракции

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

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

K
На сайте с 03.06.2015
Offline
45
#10

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

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

Ayavryk,

и естественно совпадающую по синтаксису с jquery.

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

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

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

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

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

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

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

Seredniy:
Варианты подгружаются аяксом в формате json.

Следовательно рендер будет дистиллированный, без мусора текстовых нод. Если все сделано правильно, вам остается только отсечь самого родителя полностью сравнив 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')){} даст бетонную гарантию попадания в цель.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий