Изменение классов CSS, добавленных в DOM во время выполнения

Question

Я включил JavaScript на третьей странице на третьей странице. Это добавляет следующий элемент на странице через некоторое время после загрузки страницы:

<a class="foo">some link</a> 

Мне нужно убедиться, что это меняется на:

<a class="bar">some link</a> 

ASAP после того, как элемент добавляется к странице. Я попытался добавить следующее к JQuery готовый обработчик

$('a.gullSearchBtn').removeClass('gullSearchBtn').addClass('roundButton'); 

Но это выполняется перед добавлением элемента и, следовательно, не работает. Я искал в Интернете, и похоже, что функция jQuery, известная как «livequery», может быть решением моей проблемы, но я не могу заставить ее работать.

Answer 1

Вы можете просто пойти на родные стили и использовать функцию setTimeout, чтобы проверить, не выйдет ли она. Но это будет работать только если у вас есть уникальный способ определить, что элемент, например: это единственный якорь элемент с классом Foo

Мой Рекомендуемый цикл

$(document).ready(function(){ 
    checkTimer(); 
}); 

function checkTimer(){ 
    var ele = $('a.foo'); 
    if(ele.length == 0){ 
     setTimeout(function(){ 
      checkTimer(); 
     },100); 
    } 
    else { 
     ele.attr('class','bar'); 
    } 
} 

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

setInterval() Loop

var timer; 
$(document).ready(function(){ 
    timer = setInterval(function(){ 
     checkTimer(); 
    },100); 
}); 

function checkTimer(){ 
    var ele = $('a.foo'); 
    if(ele.length != 0){ 
     ele.attr('class','bar'); 
     clearTimeout(timer) 
    } 
} 

Answer 2

Связывание с DOMNodeInserted или DOMSubtreeModified может помочь достичь этого. Но в соответствии со следующей должности это не будет работать с IE

How to detect new element creation in jQuery?

Answer 3

• демо: http://so.devilmaycode.it/change-css-classes-of-element-added-to-dom-at-runtime

 $(function() { 
      $('.foo').click(function(e) { 
       $('body').append('<p class="gullSearchBtn">text</p>'); 
       return false; 
      }); 

      setInterval(function() { 
       if ($('.gullSearchBtn').length) 
        $('.gullSearchBtn').removeClass('gullSearchBtn').addClass('roundButton'); 
        //clearInterval() optional if you don't need to loop anymore... 
      }, 100); 
     }); 

Answer 4

Рассматривали ли вы это?

оригинальный CSS

.roundButton { 
    [your rules] 
} 

изменил CSS

.gullSearchBtn, .roundButton { 
    [your rules] 
}