Использование jQuery или JavaScript для добавления атрибута к якорям после того, как DOM уже загружен

#javascript #jquery

Вопрос:

У меня есть приложение, которое требует добавления атрибута «ontouchstart» к каждому якорю, чтобы иметь привязку: активное состояние CSS для работы на устройствах iOS.

Проблема в том, что все приложение загружает содержимое через AJAX после того, как DOM уже загружен, что означает, что любой $(selector).attr('ontouchstart','') вызов будет работать только на начальном экране, а не на содержимом, добавленном позже через AJAX.

Поскольку каждый экран загружается отдельными функциями (в некоторых случаях создается самой функцией) Я хотел бы найти решение, которое допускает один вызов jQuery или JavaScript, который применяется ко всем якорям, даже к тем, которые добавлены после загрузки DOM, вместо того, чтобы проходить через каждую функцию и добавлять в вызов по отдельности (их сотни).

Возможно ли это вообще? Любая помощь будет принята с благодарностью.

Ответ №1:

Вы можете попробовать событие DOMNodeInserted:

 $(document).bind('DOMNodeInserted', function(event) {
  if (event.target.nodeName == 'A') {
    $(event.target).attr('ontouchstart','');
  }
});

Само событие срабатывает, когда в DOM добавляется узел любого типа, код просто проверяет имя узла (тег) и добавляет атрибут.

1. Очень интересно! Есть ли какие-либо проблемы с производительностью при запуске события при каждой вставке узла?

2. Я читал, что события мутации JS (одним из которых является это) приводят к снижению производительности, действительно, Mozilla категорически не поощряет их использование , они устарели на уровне DOM 3 … но вам может сойти с рук его использование в зависимости от того, насколько сложным является ваше приложение. Лучше всего было бы запустить тест с и без, если вы можете :-). Я просто хотел представить это как возможную альтернативу

3. Спасибо; это определенно лучший вариант… Мне просто нужно узнать о снижении производительности =)

Ответ №2:

Попробуйте использовать прослушиватели событий live или delegate. Оба они работают с элементами DOM, добавленными после события onload.

1. В прошлом я использовал $.live() , однако, насколько я понимаю, это зависит от события. Какое событие я бы использовал в моем случае, описанном выше?

2. Повторное чтение звучит так, как будто вы не ждете какого-либо события (или, скорее, вызов AJAX является событием). Насколько я знаю, вы не можете установить атрибут для «будущих» элементов. Вам придется добавлять этот атрибут после каждого вызова ajax.

Ответ №3:

события live() и delegate() — это то, что вы ищете.