Differenza tra jQuery.one() e jQuery.on()

Question

Ho più immagini sulla mia pagina. Per rilevare le immagini rotte, ho usato questo trovato su SO.

$('.imgRot').one('error',function(){ 
    $(this).attr('src','broken.png'); 
}); 

Questo funziona bene sulla prima immagine che ho capito. Ma quando cambio questo a

$('.imgRot').on('error',function(){ 
    $(this).attr('src','broken.png'); 
}); 

non funziona su nessuna delle immagini. Qualcuno potrebbe dirmi perché?

Answer 1

Se si guarda il codice sorgente per .one() in jQuery 1.7, chiama solo .on() internamente eccetto che dopo l'attivazione dell'evento, rimuove il gestore di eventi. Quindi, non ci dovrebbero essere differenze nel tuo caso perché error è un evento che dovrebbe accadere solo una volta per oggetto comunque.

Quindi, ci deve essere qualcos'altro che sta succedendo nel tuo codice come forse gli oggetti immagine non sono stati ancora caricati nel DOM quando si esegue questo codice o qualcosa del genere.

Se si sta tentando di utilizzare la gestione degli eventi delegata per eseguire questa operazione (che l'esempio non viene visualizzato), è possibile che si verifichino problemi in cui l'evento "errore" non si propaga.

È possibile che il codice presenti problemi di temporizzazione dovuti alla memorizzazione nella cache. Cercare di installare questi tipi di gestori degli errori su immagini già presenti nel DOM è una condizione di competizione. Stai cercando di ottenere il gestore degli errori installato prima che venga chiamato, ma l'immagine ha già iniziato il caricamento e l'evento potrebbe essere già stato attivato prima che il gestore eventi sia installato. I successivi caricamenti di pagina (dopo il primo) potrebbero aver memorizzato nella cache altri elementi di pagina o riferimenti DNS in modo che possano arrivare al gestore degli errori più rapidamente e forse anche prima che JS possa eseguire e installare i gestori degli errori.

So che questo è un problema con il caching del browser e l'evento onload. È possibile ottenere in modo affidabile l'evento onload se si collega il gestore eventi nell'HTML incorporato (quindi è presente quando il tag <img> viene analizzato per la prima volta o se viene allegato prima della proprietà .src (se si sta creando l'immagine a livello di codice). ciò suggerirebbe che non è possibile impostare in modo affidabile error gestori il modo in cui si sta facendo per le immagini che si trovano nella pagina HTML

il mio suggerimento sarebbe questo:.

• non tentare di installare gestori di errori in questo modo dopo che le immagini sono nel DOM.
• Se le si assegna su un programma generando immagini, quindi assegnare i gestori eventi prima che venga assegnato .src.
• Se hai bisogno di queste immagini nell'HTML della pagina, dovrai inserire i gestori di eventi nell'HTML con qualcosa come <img src="xxx" onerror="yourErrorFunc(this)"> perché questo è l'unico modo per garantire che i gestori siano installati prima che si verifichi l'evento.

Answer 2

wiki della comunità: Questa risposta generica non contribuisce alla domanda OP pubblicata ma relativa al titolo.

Il concetto di uno() e on() può essere spiegato con il codice di seguito.

one() la funzione viene automaticamente spostata su off dopo la prima occorrenza.

on() è identico a uno() ma deve essere messo manualmente nello stato off altrimenti il ​​numero di istanze non ha limiti.

var i = 1; 
 
$('.one').one('click', function() { 
 

 
    $(this).text('I am clickable only once: ' + i); 
 
    i++; 
 
}); 
 

 
var j = 1; 
 
$('.multiple').on('click', function() { 
 

 
    $(this).text('I was clicked ' + j + ' times'); 
 
    j++; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="one">Click me</div> 
 
<div class="multiple">Click me</div>

Answer 3

jQuery riutilizzerà "on" metodo per la "uno". Di seguito è riportato il codice interno di jQuery in cui passeranno il valore codificato "1" alla funzione di jQuery.on() Spegneranno ulteriormente l'evento innescato sull'elemento utilizzando jQuery.off()

on:function(types, selector, data, fn, one) { 

    if (one === 1) { 
      origFn = fn; 
      fn = function(event) { 
      jQuery().off(event); 
      return origFn.apply(this, arguments); 
      }; 

    } 
    off:function(types, selector, data, fn){ 
     on(types, selector, data, fn, 1); 
    } 

Quindi, nel tuo caso "errore" è il tipo di evento innescato sulla prima immagine e quando il metodo jQuery.one() chiamato questo evento è stato disattivato e quindi non attivato per ulteriori $ ('. ImgRot') elementi