.on() explanation (FR)

Explains how .on() works in jQuery.

by lun471k

HTML

<div class="chocolat">Ce texte est bleu Onclick et son background aussi!</div>Le div est loadé après que le listener soit mis... Syntaxe:
<pre>
 $('CONTAINER').on('EVENT','ELEMENT_À_ÉCOUTER',function(){
     /*Choses à faire lorsque l'évènement est 'triggeré'*/
 });
</pre>
<button id="stop">STOP</button>

CSS

body {
    font-family:Arial,sans-serif;
}
.chocolat {
    font-weight:bold;
    cursor:pointer;
}

JavaScript

var fontColor = "rgb(0,191,255)";

/****************/
/* NE PAS FAIRE */
/****************/
/* .on() directement sur le sélecteur des éléments visés */
/* fonctionne seulement avec les éléments existants  */
/* dans la page au moment de l'exécution du script */
$('.chocolat').on('click', function () {
    $(this).css('background-color', fontColor);
});


/*************************/
/* FAIRE CECI À LA PLACE */
/*************************/
/*.on() sur un conteneur met le listener sur l'élément parent */
/*(ou celui mentionné comme élément conteneur), donc l'action */
/* est exécutée pour les éléments qui sont créés dynamiquement*/
$('body').on('click', '.chocolat', function () {
    if($(this).css('color') == fontColor)
       $(this).css('color','#000');
    else
        $(this).css('color', fontColor);
});

/*Création d'éléments dynamiques afin de démontrer les deux .on()*/
var interv = setInterval(function () {
    $('body').append($('<div class="chocolat">Ce texte est bleu Onclick (element créé après!)</div>'));
}, 2500);

$('#stop').click(function(){
    clearInterval(interv);
});