Cannot change headings to random colour on page load

[cs475x]

When the page loads a random colour is generated and applied to the 'TEST COLOUR' text and the headings of the RSS feed.http://jsfiddle.net/chrisloughnane/nqkH4/The trouble is the RSS feed heading's colour does not change. I setup an event, click 'TEST COLOUR' and the heading colour will change so I've figured it is to do with dynamically added elements.I have looked at .on() but have not managed to get it to work. Could someone post the code needed to change the headings colour on page load?tiajQuery plugin is FeedEk:http://jquery-plugins.net/FeedEk/FeedEk.htmlCODE\[code\]$(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); }});\[/code\]HTML\[code\]<div id="example">TEST COLOUR</div><div id="divRss"></div>\[/code\]CSS\[code\].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;}\[/code\]