JQuery "on appear" event

Question

Moja aplikacja dodaje niektóre elementy do DOM po $ (document) .ready został wywołany. Używam jQuery 1.9.0

Poniższy przykład działa.

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

Jednak chcę wykonać tę funkcję, gdy element pojawia się na ekranie. Nie widzę tutaj żadnego zdarzenia dla tego celu.

Zasadniczo jest to aplikacja z pojedynczą stroną, więc dokument gotowy jest wywoływany tylko raz, ale elementy pojawiają się i znikają, gdy użytkownik wchodzi w interakcje z interfejsem użytkownika.

Answer 1

Może chcesz .ready() funkcja:

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

lub jeśli blaknięcie go:

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

---

Aktualizacja: Jak @Jeff Tian „s comment-

Musisz przekazać zdarzenie do jednego z najbliższych stanów statycznych wynajęcia lub do document jak ten:

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

Answer 2

Myślę, że pytasz, czy można wywołać zdarzenie, gdy element kierowane jest dodany do DOM. Daj mi znać, jeśli nie tego chcesz.

$(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'); 

nadziei, która jest co szukasz

można skrócić to do

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

Answer 3

wydarzenia są ładne, ale ponieważ nie ma natywnej wydarzeniem dla wyglądu, wydarzenia wymagają wiedząc kiedy element jest dodawany, dzięki czemu zdarzenie może być wyzwalane ręcznie. Możesz użyć odpytywania, aby przetestować wygląd i wykonać akcję, gdy się pojawi. Działa to doskonale w przypadku treści dodawanych poza kontrolą użytkownika, na przykład z poziomu danych wprowadzanych przez użytkownika, ajax lub innych programów.

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

Pozwoli to sprawdzić pod kątem wystąpienia elementu przez nazwę klasy (lub jakichkolwiek innych kryteriów selektora ty Supply) 4 razy każdy drugi i uruchomić kod, gdy pojawia się nowa pozycja. Po wyświetleniu elementu zostanie dodana klasa .appeared, aby zapobiec ponownemu wykryciu tej instancji. Jeśli chcesz przetestować tylko jeden wygląd, możesz uprościć tak i zamknąć pobieranie po wykryciu.

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

JQuery appear Wtyczka jest zbudowany wokół tych technik i ma dużo więcej opcji, takich jak testy do jeżeli rzecz znajduje się w obszarze widzenia, ale jeśli wszystko, co chcesz zrobić, to test dla kilku elementów dodawanych do domu powyższy kod jest znacznie bardziej przydatny niż wtyczka.