Как добавить class к динамически добавленным элементам на JQ?

Question

[OneTwoThreeFourFive]

Здравствуйте. Есть календарь, который получает мероприятия через ajax. Мне нужно добавить class к ссылке на мероприятие. Обычный способ не работает потому что при загрузке страницы нет ссылок на мероприятие, они появляются чуть позже, когда вернутся данные. Я пробовал использовать событие on("click", ...), но это работает только при клике на кнопку. А мне нужно сразу при загрузке страницы, как только появятся ссылки. Ещё я пробовал $( document ).ajaxComplete(function() { }); и это работает, но после следующего ajax запроса, класс удаляется с уже добавленных элементов. Подскажите пожалуйста как добавить класс к элементу, как только он появится на странице.

Answer 1

[OneTwoThreeFourFive]

Всем спасибо за ответы. Решил велосипедом. Раньше это $( document ).ajaxComplete(function() { ... }); работало 1 раз после запроса, а при переключении месяца (следующий/предыдущий) класс удалялся. Добавил код при клике на эти кнопки добавлять класс. И это работает, класс добавляется уже к существующим и после ajax запроса, и с высотой всё нормально.

// После ajax запроса добавить класс
$( document ).ajaxComplete(function() {
    $("a.link-event").addClass("circle");
});

// При клике на кнопку "следующий" или "предыдущий" месяц добавить такой же класс
$( document ).on( "click", ".month-button", function() {
   $("a.link-event").addClass("circle");
});

Если вы знаете вариант лучше, напишите в комментариях

Answer 2

[Anton fon Faust]

А зачем вам добавлять класс?
Создайте нормальный селектор, прицепите к нему стили и будет вам счастье.

.calendar div.someClass>a {
    color: red;
}

этот css назначит красный цвет ссылке непосредственно вложенной в div с классом .someClass, который в свою очередь имеет одним из родителей .calendar.
И этот стиль будет применяться к каждой подходящей ссылке, когда бы вы ее не добавили.

Comments

[OneTwoThreeFourFive]

Спасибо за ответ. В календаре по дефолту просто ссылка и background, надо чтобы был не текст ссылки, а просто кружок, наведя на который будет показан текст ссылки (кружок становится прямоугольником под ширину и высоту текста). Если сразу написать стили, то высота кружка 20x20px и соответственно див в ячейке в таблице загружается под высоту 20px и при наведении на кружок, текст ссылки появляется и не влазит в эту высоту. Я хотел сделать так: ajax запрос > вернулись данные > высота высчитана и добавлена в ячейку > добавить класс (прямоугольные ссылки стали кружками) > при наведении ссылке достаточно места, чтобы быть в своей ячейке. Редактировать плагин нельзя из-за потери изменений после обновлений.

[Anton fon Faust]

OneTwoThreeFourFive, То же самое, если вы просто подберете селектор и стилизуете.
Только не надо морочиться с назначением класса.

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

Answer 3

[Виктор П.]

Привет!
Попробуй навешивать события через метод live, он предназначался как раз для таких ситуаций.
Но, как мне подсказали пару месяцев назад, этот метод выпилили с какой-то версии jQuery и теперь с динамически созданными элементами нужно работать через data-* аттрибуты

Comments

[OneTwoThreeFourFive]

Спасибо за ответ. Я тоже слышал про live, но да, его убрали и по этому не подходит данный вариант. Использовать data атрибуты тоже не подходит, так как их нет по дефлоту, а редактировать плагин нельзя из-за потери изменений после обновления. Если только как-то динамически добавить data атрибуты...

[Виктор П.]

ну вообще говорят, что live заменили на on на динамических элементах, должно работать:

// Было
 $('#mydiv .element').live('click', function(){
// здесь параметры функции
});

// Стало
$('#mydiv').on('click', '.element', function(){
// здесь параметры функции
});

То есть, для динамических элементов селектор передается дополнительным параметром