JQuery "on appear" event

Question

La mia applicazione aggiunge alcuni elementi al DOM dopo che $ (document) .ready è stato chiamato. Sto usando jQuery 1.9.0

Il seguente esempio funziona.

$(document).on("click", "#box-descr", function(evt) { 
    console.log("I showed up"); 
}); 

Tuttavia, voglio eseguire quella funzione quando l'elemento appare sullo schermo. Non ho potuto vedere nessun evento per questo scopo qui http://api.jquery.com/category/events/

Fondamentalmente si tratta di un'applicazione a pagina singola, quindi il documento pronto viene chiamato una sola volta ma gli elementi entrano e escono dallo schermo mentre l'utente interagisce con l'interfaccia utente.

Answer 1

Può essere che si desidera .ready() funzione:

$("#box-descr").ready(function(){ 
    console.log("I showed up"); 
}); 

o se si sta svanendo in:

$("#box-descr").fadeIn(1000, function(){ 
    console.log("I showed up"); 
}); 

---

Aggiornamento: Come s @Jeff Tian' comment-

È necessario delegare l'evento al pa più statico più vicino affittare o alla document in questo modo:

$(document).on("ready", "#box-descr", function(){ 
    console.log("I showed up"); 
}); 

Answer 2

Penso che tu stai chiedendo se è possibile attivare l'evento quando l'elemento mirato viene aggiunto al DOM. Fammi sapere se questo non è quello che vuoi.

$(document).on('click', '#box-descr', function(evt) { 
    console.log("I showed up"); 
}); 

// Later in your code you add the element to the DOM 
$('<div />', { id : 'box-descr' }).appendTo('body'); 

// Then trigger the click event for the added element 
$('#box-descr').trigger('click'); 

speranza che è quello che stai cercando

È possibile ridurre questo per

$('<div />', { id : 'box-descr' }).appendTo('body').trigger('click'); 

Answer 3

Eventi sono belle, ma perché non c'è evento nativo per l'aspetto, eventi richiedono sapendo quando un l'elemento viene aggiunto in modo che l'evento possa essere attivato manualmente. È possibile utilizzare il polling per verificare l'aspetto di qualcosa e fare un'azione quando appare. Funziona perfettamente per i contenuti aggiunti al di fuori del tuo controllo, ad esempio da input dell'utente, ajax o altri programmi.

setInterval(function() { 
    $('.my-element-class:not(.appeared)') 
     .addClass('appeared') 
     .each(function() { 
      console.log("here I am!") 
     }); 
}, 250); 

Questo controllerà per la comparsa di un elemento dal nome della classe (o qualsiasi altro criterio di selezione che fornite) 4 volte al secondo ed eseguire il codice quando appare un nuovo elemento. Quando viene visualizzato un oggetto, viene aggiunta la classe .appeared per impedire che tale istanza venga nuovamente rilevata. Se si desidera testare solo per un aspetto, è possibile semplificare in tal modo e chiudere il polling dopo il rilevamento.

var testAppearTmr = setInterval(function() { 
    if ($('.my-element-class').length) { 
     clearInterval(testAppearTmr); 
     console.log("here I am!") 
    } 
}, 250); 

Il appear plugin per jQuery è costruito attorno a queste tecniche e ha molte più opzioni, come i test per se l'articolo è nella zona di vista, ma se tutto quello che vogliamo fare è di prova per un paio di articoli che viene aggiunto per la dom il codice di cui sopra è molto più parsimonioso di un plugin.