Styling dynamically generated divs with jQuery

Question

The following code works:

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

divs with the class.ado are generated dynamically in the div #class (which exists on page load) and the code styles each instance with a different colored left border. The problem is I can't get this to work on load - only on mouseover (or click, etc.). I understand from the jQuery site that 'load' is one of the events that doesn't bubble, so .on('load', '.ado', function() { doesn't work. How can I get the styling to be applied on page load without any user action?

Thanks.

Answer 1

You can manually trigger the mouseover event for those elements

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