Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Повесить jQuery плагин на динамически добавленные элементы / 18 сообщений из 18, страница 1 из 1
20.11.2016, 00:48
    #39350387
MikkiMouse
MikkiMouse
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Повесить jQuery плагин на динамически добавленные элементы
Всем привет!

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

Вот есть у меня некоторый кусок кода, который вынесен в плагин:
Код: 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, 01:54
    #39350392
hVostt
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Повесить jQuery плагин на динамически добавленные элементы
MikkiMouseА вот на динамически добавленные элементы чет не вешается.

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

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, 15:33
    #39350499
MikkiMouse
MikkiMouse
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Повесить jQuery плагин на динамически добавленные элементы
skyANA,

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

Элементы в DOM добавляет js-шаблонизатор, получает JSON аяксом. И вот на них плагин уже не работает.
В принципе нашел решение вызывать плагин на элементах еще раз сразу после добавления их в DOM, но по-моему оно какое-то кривоватое. Должен быть другой путь. Почему и спрашиваю, может кто знает
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.11.2016, 16:23
    #39350522
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Повесить jQuery плагин на динамически добавленные элементы
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, 18:59
    #39350569
hVostt
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Повесить jQuery плагин на динамически добавленные элементы
MikkiMouseвызывать плагин на элементах еще раз сразу после добавления их в DOM, но по-моему оно какое-то кривоватое

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

moxiemaks.ru/jquery/sobytija-dlja-dinamicheski-dobavlennyh-jelementov-v-jquery/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.06.2017, 13:10
    #39478982
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Повесить jQuery плагин на динамически добавленные элементы
Странное утверждение насчёт того, что элемент обязательно должен быть добавлен в ДОМ, при навешивании на него события.
Код: 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, 15:03
    #39479116
hVostt
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Повесить jQuery плагин на динамически добавленные элементы
ShSerge,

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

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

реклама что ли?
Похоже, но не туалетная бумага и не тампаксы. Поэтому ссылку оставил. Только не как ссылку.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Повесить jQuery плагин на динамически добавленные элементы / 18 сообщений из 18, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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