Невозможно изменить заголовки на случайный цвет при загрузке страницы

Question

Когда страница загружается, случайный цвет генерируется и применяется к тексту «ТЕСТ ЦВЕТ» и заголовкам RSS-канала.

http://jsfiddle.net/chrisloughnane/nqkH4/

Проблема цветов в RSS-канал товарной позиции не меняется.

Я настраиваю событие, нажимаю «TEST COLOR», и цвет заголовка меняется, поэтому я решил, что это связано с динамически добавленными элементами.

Я посмотрел на .on(), но не смог заставить его работать.

Может ли кто-нибудь опубликовать код, необходимый для изменения цвета заголовков на странице загрузки?

ТИА

JQuery плагин FeedEk: http://jquery-plugins.net/FeedEk/FeedEk.html

КОД

$(document).ready(function(){ 

    $('#divRss').FeedEk({ 
     FeedUrl : 'http://rss.cnn.com/rss/edition.rss' 
    }); 

    var r = Math.floor(Math.random()*256); 
    var g = Math.floor(Math.random()*256); 
    var b = Math.floor(Math.random()*256); 

    $('#example, .itemTitle a').css("color", getHex(r,g,b)); 

    $('#example').click(function() { 

     $('.itemTitle a').css("color", getHex(r,g,b)); 

    }); 

    function intToHex(n){ 
     n = n.toString(16); 
     if(n.length < 2) 
      n = "0"+n; 
     return n; 
    } 

    function getHex(r, g, b){ 
     return '#'+intToHex(r)+intToHex(g)+intToHex(b); 
    } 

}); 

HTML

<div id="example">TEST COLOUR</div> 
<div id="divRss"></div> 

CSS

.feedEkList{width:450px; list-style:none outside none;background-color:#FFFFFF; border:1px solid #D3CAD7; padding:4px 6px; color:#3E3E3E;} 
.feedEkList li{border-bottom:1px solid #D3CAD7; padding:5px;} 
.feedEkList li:last-child{border-bottom:none;} 
.itemTitle a{font-weight:bold; color:#4EBAFF; text-decoration:none } 
.itemTitle a:hover{ text-decoration:underline } 
.itemDate{font-size:11px;color:#AAAAAA;} 

#example { font-weight: bold; cursor: pointer;} 

Answer 1

-Edit-

В ответ на комментарии ниже, то timeout ненадежно. Я расширил включенную библиотеку, чтобы разрешить функцию обратного вызова. По умолчанию alert('done'), но он может быть передан в качестве аргумента, чтобы делать все, что вам нужно.

Обновлено скрипки: http://jsfiddle.net/nqkH4/8/

В качестве альтернативы, как описано ниже, вы можете опрашивать содержимое вашей целевой DIV, чтобы увидеть, если его содержание имеет изменение, когда у него есть, вы знаете, что вызов завершен.

Я думаю, что проблема в том, что есть минута задержка с контентом, поражающим DOM и скриптом, пытающимся его стилизовать. Он получил работу с небольшим timeout.

setTimeout(function() { 
    var r = Math.floor(Math.random() * 256); 
    var g = Math.floor(Math.random() * 256); 
    var b = Math.floor(Math.random() * 256); 
    var color = getHex(r, g, b); 

    $('#example, .itemTitle a').css("color", color); 

}, 50); 

Обновлено Fiddle: http://jsfiddle.net/nqkH4/6/