jQuery concatena la funzione personalizzata

Question

Devo chiamare una funzione personalizzata dopo aver attivato tutti i miei articoli. Non per ciascuno.

Diciamo che abbiamo un avviso:

function myAlert() { alert("OK"); } 

Se il codice come questo, si chiede ogni volta che si alterna:

$('div.myGroupOfItems').toggle('fast',function() { 
myAlert(); 
}); 

Come posso fare in questo modo, dal momento che il mio è una funzione JS personalizzata? In questo modo non funziona:

$('div.myGroupOfItems').toggle('fast').myAlert(); 

O altre soluzioni?

Answer 1

È possibile utilizzare questo da jQuery 1.6 in poi ...

$('div.myGroupOfItems').toggle('fast'); 

$('div.myGroupOfItems').promise().done(function() { 
    myAlert(); 
}); 

Answer 2

Si dovrebbe estendere jQuery per aggiungere il metodo ad esso. Si può fare in questo modo:

$.fn.myAlert = function() { 
    alert("OK"); 
}; 

Se si vuole essere in grado di catena di altri metodi di jQuery Dopo di che, è necessario tornare this dal plugin.

Ecco uno working example.

---

Se sei interessato a ciò che effettivamente fa in modo un po 'più dettagliato, continua a leggere. $.fn è semplicemente un alias per $.prototype. Aggiungendo una proprietà allo prototype, si stanno effettivamente estendendo tutte le istanze di jQuery.

Quando si chiama $, jQuery crea internamente un'istanza (non è necessario creare manualmente un'istanza, ad es. Con l'operatore new). Dal momento che hai esteso $.prototype, tutte le istanze ora avranno accesso al tuo nuovo metodo.

Se si utilizza il codice esattamente come indicato sopra (senza la dichiarazione return) non sarà possibile associare ulteriori chiamate ai metodi jQuery. Restituendo l'istanza dal metodo, le chiamate saranno chainable:

$.fn.myAlert = function() { 
    alert("OK"); 
    return this; 
}; 

Si noti che all'interno del metodo, this fa riferimento a un'istanza di jQuery, quindi non c'è alcun bisogno di avvolgerla in una chiamata inutile $.

Answer 3

Per usare la sintassi che si avrebbe bisogno per rendere la vostra funzione in un plugin jQuery come questo:

$.fn.extend({   
    myAlert: function() { 
     alert('OK'); 
     return this; // return the assigned elements to continue chaining. 
    } 
}); 

$('div.myGroupOfItems').toggle('fast').myAlert();