styles - Styling dynamically generated divs with jQuery -

the following code works:

$('#class').on('mouseover', '.ado', function() {  var colors = ["#848484", "#088a08", "#ffbf00", "#a901d8", "#ff0000", "#0000ff"];     var = 0;     $('.ado').each(function(i) {     $(this).css({'border-left-width' : '5px', 'border-left-style' : 'solid', 'border-left-color' : colors[i]});     = (i + 1)%colors.length;   }); }); 

divs class.ado generated dynamically in div #class (which exists on page load) , code styles each instance different colored left border. problem can't work on load - on mouseover (or click, etc.). understand jquery site 'load' 1 of events doesn't bubble, .on('load', '.ado', function() { doesn't work. how can styling applied on page load without user action?

thanks.

you can manually trigger mouseover event elements

$('#class .ado').trigger('mouseover')