Il problema dei plugin jQuery è che una volta legati ad un elemento durano per l'intero ciclo vitale di un documento, ossia fino ad un nuovo caricamento dello stesso e quindi alla ricostruzione del DOM. Possiamo quindi implementare dei distruttori per resettare questo comportamento. Vediamo come.
Il seguente plugin di esempio aggiunge all'oggetto $.fn.cursorMessage il metodo destroy() che rimuove l'elemento generato e l'evento associato al soggetto del plugin. Ricordo che in JavaScript una funzione è un oggetto:
(function($) {
$.fn.cursorMessage = function(options) {
var that = this; // riferimento all'elemento jQuery
options = $.extend({
text: 'Test',
textcolor: '#333',
background: '#ccc',
width: 150
}, options);
$('<div id="cursormessage"></div>').css({
color: options.textcolor,
backgroundColor: options.background,
width: options.width,
position: 'absolute'
}).text(options.text).appendTo('body').hide();
$.fn.cursorMessage.destroy = function() {
$('#cursormessage').remove();
that.unbind('mousemove'); // uso il riferimento all'elemento jQuery
}
return this.each(function() {
var message = $('#cursormessage');
$(this).mousemove(function(e) {
message.css({
display: 'block',
top: e.pageY - 5,
left: e.pageX + 15
});
});
});
};
}(jQuery));
Esempio:
$('a.message').cursorMessage();
$('#destroy').click(function() {
$('a.message').cursorMessage.destroy();
});
Potete visionare l'esempio finale in questa pagina.