jQuery • jCreate event

jCreate is a plugin for jQuery that adds a new bindable event. Now you can do something cool when one or more elements are created and are available on the page.

by Marco Montalbano

HTML

<script src="https://rawgit.com/mmontalbano/jquery-jcreate/master/dist/jquery.jcreate.min.js"></script>
<button>create new element</button>
<div id="container"></div>

SCSS

#container > div {
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    display: inline-block;
}

JavaScript

// gets a random hexadecimal code between 0 and 255.
var rndHex = function() {
    return ('0' + Math.round(Math.random() * 255).toString(16)).slice(-2);
};

// generate a random hexadecimal color code (es: #ff00ff)
var generateColor = function() {
    return '#' + rndHex() + rndHex() + rndHex();
}

// clicking on the button ..
$('button').on('click', function() {
    
    // .. create a new div
    var $div = $('<div>').text('this is a new element');
                   
    // .. append <div> to #container
    $('#container').append( $div );
});

// jCreate :)
$('#container').on('create', '> div', function() {
    
    // sets a random background color for each created element
    $(this).css('backgroundColor', generateColor());
});