Cosa succede quando ci sono più istanze di uno stesso plugin jQuery sullo stesso elemento? Gli effetti sono sempre indesiderati, specie per quei plugin che utilizzano animazioni. Fortunatamente esiste una soluzione a questo problema.
Si tratta in pratica di aggiungere un flag all'elemento selezionato utilizzando le API di dati di jQuery:
(function( $ ) {
$.fn.plugin = function() {
return this.each(function() {
var $element = $( this );
$element.data( "plugin", $element.plugin );
});
};
$(function() {
$( "#test" ).plugin();
console.log( typeof $( "#test" ).data( "plugin" ) ); // function
});
})( jQuery );
Vediamo un'applicazione pratica di questa tecnica. Supponiamo di dover invocare il nostro plugin su un evento click. Usando questa tecnica evitiamo che dopo il
primo click si aggiungano altre istanze del plugin all'elemento selezionato:
$( "#button" ).click(function() {
var $element = $( "#test" );
if( !$element.data( "plugin" ) ) {
$element.plugin();
}
});