La méthode on( events [, selector ] [, data ], handler ) permet d'attacher une fonction gestionnaire d'événements à un ou plusieurs événements qui se produiront sur l'élément qui l'appelle.
Les paramètres
- events : chaîne de caractères : blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error...
- selector : un sélecteur css qui cherchera à partir de l'élément du DOM appelant (optionnel)
- data : données à passer en paramètre à la fonction quand un événement est déclenché (optionnel)
- handler : fonction à exécuter quand l'événement est déclenché.
Exemple sans sélecteur ni données :
jQuery(function($){ const form = $("<form></form>",{ id: "form", class: "form" }).appendTo("body"); const go = $("<button></button>",{ text: "GO !", id: "go", class: "button" }).appendTo("form"); //gestion des événements go.on("click",function(e){ console.log("click sur bouton go"); e.preventDefault(); }) });
Exemple avec sélecteur et données :
jQuery(function($){ for(let i=0; i< 10;i++) { $("<button></button>",{ text: i, id: "button" + (i), class: "button" }).appendTo("body"); } for(let i=0; i< 10;i++) { $("body").on("click","#button" + i, {value: "bouton" + i},function( event ){ console.log(event.data.value); }); } });