Chcę wykonać funkcję, gdy do kodu HTML zostaną dodane jakieś pliki div lub dane wejściowe. czy to możliwe?
Na przykład dodawane jest wprowadzanie tekstu, a następnie należy wywołać funkcję.
Chcę wykonać funkcję, gdy do kodu HTML zostaną dodane jakieś pliki div lub dane wejściowe. czy to możliwe?
Na przykład dodawane jest wprowadzanie tekstu, a następnie należy wywołać funkcję.
Odpowiedzi:
Aktualizacja 2015, nowe
MutationObserver
są obsługiwane przez nowoczesne przeglądarki:Chrome 18+, Firefox 14+, IE 11+, Safari 6+
Jeśli potrzebujesz wsparcia starszych, możesz spróbować powrócić do innych podejść, takich jak te wymienione w tej 5 (!) Letniej odpowiedzi poniżej. Są smoki. Cieszyć się :)
Ktoś inny zmienia dokument? Ponieważ jeśli masz pełną kontrolę nad zmianami, wystarczy utworzyć własny
domChanged
interfejs API - z funkcją lub zdarzeniem niestandardowym - i wywoływać go / wywoływać wszędzie tam, gdzie modyfikujesz.DOM Level-2 ma typy zdarzeń mutacji , ale starsza wersja IE nie obsługuje. Należy pamiętać, że zdarzenia mutacji są przestarzałe w specyfikacji Zdarzenia DOM3 i mają negatywny wpływ na wydajność .
Możesz spróbować emulować zdarzenie mutacji za pomocą
onpropertychange
IE (i wrócić do metody brutalnej siły, jeśli żadna z nich nie jest dostępna).W przypadku pełnej zmiany domeny interwał może być nadmiernym zabiciem. Wyobraź sobie, że musisz zapisać bieżący stan całego dokumentu i sprawdzić, czy każda właściwość każdego elementu jest taka sama.
Może jeśli jesteś zainteresowany tylko elementami i ich kolejnością (jak wspomniałeś w swoim pytaniu), a
getElementsByTagName("*")
może zadziałać. Uruchomi się automatycznie, jeśli dodasz element, usuniesz element, zastąpisz elementy lub zmienisz strukturę dokumentu.Napisałem dowód koncepcji:
Stosowanie:
Działa w IE 5.5+, FF 2+, Chrome, Safari 3+ i Opera 9.6+
źródło
To jak dotąd najlepsze podejście z najmniejszym kodem:
IE9 +, FF, Webkit:
źródło
mutations, observer
parametry do funkcji zwrotnej, aby uzyskać większą kontrolę.Niedawno napisałem wtyczkę, która właśnie to robi - jquery.initialize
Używasz go w taki sam sposób jak
.each
funkcjiRóżnica od
.each
polega na tym, że - w tym przypadku bierze on swój selektor.some-element
i czeka na nowe elementy za pomocą tego selektora w przyszłości, jeśli taki element zostanie dodany, zostanie również zainicjowany.W naszym przypadku funkcja inicjalizacji wystarczy zmienić kolor elementu na niebieski. Więc jeśli dodamy nowy element (bez względu na to, czy z ajaxem, a nawet inspektorem F12 lub czymkolwiek), jak:
Wtyczka uruchomi go natychmiast. Również wtyczka zapewnia, że jeden element zostanie zainicjowany tylko raz. Więc jeśli dodasz element, a następnie
.detach()
z ciała, a następnie dodasz go ponownie, nie zostanie on ponownie zainicjowany.Wtyczka jest oparta na
MutationObserver
- będzie działać na IE9 i 10 z zależnościami opisanymi na stronie readme .źródło
lub możesz po prostu stworzyć własne wydarzenie , które będzie się odbywać wszędzie
Pełny przykład http://jsfiddle.net/hbmaam/Mq7NX/
źródło
To jest przykład użycia MutationObserver z Mozilli dostosowanego do tego posta na blogu
Chrome 18+, Firefox 14+, IE 11+, Safari 6+
źródło
Użyj interfejsu MutationObserver , jak pokazano w Gabriele Romanato blogu
Chrome 18+, Firefox 14+, IE 11+, Safari 6+
źródło
Co powiesz na rozszerzenie jquery w tym celu?
Jquery 1.9+ ma wbudowane wsparcie dla tego (słyszałem, że nie testowałem).
źródło