ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Повесить jQuery плагин на динамически добавленные элементы
18 сообщений из 18, страница 1 из 1
Повесить jQuery плагин на динамически добавленные элементы
    #39350387
MikkiMouse
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MikkiMouse
Участник
Всем привет!

Подскажите, плиз, опытные джаваскриптеры.

Вот есть у меня некоторый кусок кода, который вынесен в плагин:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
$(document).ready(function () {
    $.fn.somePlugin = function () {
        // Тут какие-то подергивания
    };
    
    $('.classToBindPlugin').somePlugin();
});



Оно нормально отрабатывает на элементах, которые уже присутствуют в DOM'е. А вот на динамически добавленные элементы чет не вешается. Как такое толком написать?

Со всякими обработчиками кликов там понятно - там
Код: javascript
1.
$(parentElem).on(event, selectedElem, function() {});



А вот как в таком случае сделать?
...
Рейтинг: 0 / 0
20.11.2016, 00:48
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39350392
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
MikkiMouseА вот на динамически добавленные элементы чет не вешается.

Это как? Ты их в DOM не добавляешь что ли? Какие же это тогда элементы, если они не в DOM-е? Приведи пример что и как ты делаешь.
...
Рейтинг: 0 / 0
20.11.2016, 01:54
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39350435
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
ТС видимо хочет один раз "навесить". Как в случае с делегируемыми событиями.

Delegated eventshave the advantage that they can process events from descendant elements that are added to the document at a later time.
By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.
http://api.jquery.com/on/
...
Рейтинг: 0 / 0
20.11.2016, 10:19
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39350499
MikkiMouse
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MikkiMouse
Участник
skyANA,

Да все понятно с делегируемыми, на что мне тут on() повесить?

Элементы в DOM добавляет js-шаблонизатор, получает JSON аяксом. И вот на них плагин уже не работает.
В принципе нашел решение вызывать плагин на элементах еще раз сразу после добавления их в DOM, но по-моему оно какое-то кривоватое. Должен быть другой путь. Почему и спрашиваю, может кто знает
...
Рейтинг: 0 / 0
20.11.2016, 15:33
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39350522
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
MikkiMouse, нашли решение - молодец.

А рассуждать о его кривизне, не зная ни задачи, ни плагина, смысла нету.
Например jQuery Modal вызывается после добавления элементов в DOM и это нормально:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
// Open modal in AJAX callback
$('#manual-ajax').click(function(event) {
  event.preventDefault();
  $.get(this.href, function(html) {
    $(html).appendTo('body').modal();
  });
});
...
Рейтинг: 0 / 0
20.11.2016, 16:23
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39350569
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
MikkiMouseвызывать плагин на элементах еще раз сразу после добавления их в DOM, но по-моему оно какое-то кривоватое

Не никаких элементов не в DOM. Я же об этом написал уже. Элементы есть только в DOM. Что и на что ты собирался вешать, если никаких элементов не существует? Просто рекомендую подумать на эту тему.
...
Рейтинг: 0 / 0
20.11.2016, 18:59
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39350570
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
skyANAпосле добавления элементов в DOM и это нормально

Это не нормально, это правильно :)
...
Рейтинг: 0 / 0
20.11.2016, 19:00
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39350577
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
hVosttskyANAпосле добавления элементов в DOM и это нормально

Это не нормально, это правильно :)
Так и запишем: Хвост разводит лапшу в колбеках :)
...
Рейтинг: 0 / 0
20.11.2016, 19:12
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39350621
MikkiMouse
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MikkiMouse
Участник
hVostt,

hVosttНе никаких элементов не в DOM. Я же об этом написал уже. Элементы есть только в DOM. Что и на что ты собирался вешать, если никаких элементов не существует? Просто рекомендую подумать на эту тему.


Что за бред сумасшедшего? Если тbI не вкурил о чем вопрос - побудь читателем, пожалуйста, не засоряй тему.
...
Рейтинг: 0 / 0
20.11.2016, 20:52
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39350659
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
MikkiMouseЧто за бред сумасшедшего? Если тbI не вкурил о чем вопрос - побудь читателем, пожалуйста, не засоряй тему.

У тебя похоже заскорузлый болезненный пунктик на «ты». Я сам решу, когда мне быть читателем, а когда быть писателем. Есть два способа вешать обработчики на элементы, добавляемые в DOM динамически: вешать обработчик на контейнер, это самый эффективный путь, и навешивать каждый раз после добавления. От того, нравится тебе это или нет, третий способ не появится.
...
Рейтинг: 0 / 0
20.11.2016, 22:23
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39350662
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
skyANAТак и запишем: Хвост разводит лапшу в колбеках :)

Я к тому сказал, что если элементов в DOM нет, то и вешать обработчики некуда. Плагины jQuery обычно вешаются на конкретные элементы, потому что часто привязывают к ним не только события, но и состояния.
...
Рейтинг: 0 / 0
20.11.2016, 22:25
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39350692
MikkiMouse
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MikkiMouse
Участник
hVostt,

О, видишь, побыл немного читателем - сразу и конструктив появился. Наконец прочитал про "динамически" )))

В принципе, появилась еще идея с контейнером: сделать в начальной разметке блок с определенным классом и навесить плагин на него. А аяксом уже подгрузить только его внутренности. Думаю так должно прокатить.

Завтра попробую, всем конструктивным спасибо за помощь.
...
Рейтинг: 0 / 0
21.11.2016, 00:03
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39359787
MikkiMouse
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MikkiMouse
Участник
В общем все было намного проще - плагин был самописный (верстальщиком хе-хе), вследствие чего, естественно, глючный. Все там нормально работало не надо было никаких лишних телодвижений.
То есть, как в том анекдоте: "Извиняюсь, был напуган" )))
...
Рейтинг: 0 / 0
03.12.2016, 01:59
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39478860
moxiemaks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
moxiemaks
Гость
jQuery работает с элементами, которые были на странице на момент инициализации кода.

Если добавляются новые элементы - при помощи ajax'а или функций типа append() - то события не затрагивают их.

Как же работать с новыми созданными элементами DOM?

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

Если кратко, то смысл делегирования в том, что обработчики "навешиваются" не на отсутствующие в dom элементы, а на существующий родительский объект.

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

100% рабочий пример можно подсмотреть тут

moxiemaks.ru/jquery/sobytija-dlja-dinamicheski-dobavlennyh-jelementov-v-jquery/
...
Рейтинг: 0 / 0
28.06.2017, 10:45
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39478982
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Странное утверждение насчёт того, что элемент обязательно должен быть добавлен в ДОМ, при навешивании на него события.
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
<html>
<body>
</body>
<script>
var but=document.createElement("BUTTON");
but.innerHTML="ClickMe";
but.onclick=function(){alert("123");}
//Всё навесили. Только теперь добавляем в ДОМ.
document.body.appendChild(but);
</script>
</html>
...
Рейтинг: 0 / 0
28.06.2017, 13:10
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39479116
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
ShSerge,

Ключевое здесь «при навешивании на него события». Событие само по себе не навешается :)
А так конечно ты прав.
...
Рейтинг: 0 / 0
28.06.2017, 15:03
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39479156
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
moxiemaks,

реклама что ли?
...
Рейтинг: 0 / 0
28.06.2017, 15:39
| Ответить | Цитировать | Написать  
Повесить jQuery плагин на динамически добавленные элементы
    #39479252
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Изопропилmoxiemaks,

реклама что ли?
Похоже, но не туалетная бумага и не тампаксы. Поэтому ссылку оставил. Только не как ссылку.
...
Рейтинг: 0 / 0
28.06.2017, 18:04
| Ответить | Цитировать | Написать  
18 сообщений из 18, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Повесить jQuery плагин на динамически добавленные элементы
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=37&tid=1444567]:
 0ms
get settings:
 8ms
get forum list:
 11ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 43ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 50ms
get tp. blocked users:
 2ms
others: 11ms
total:  143ms
созд. / загр.: 143ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]