Jak wywołać funkcję po div jest gotowy?

Question

Mam następujących w moim pliku javascript:

var divId = "divIDer"; 

jQuery(divId).ready(function() { 
    createGrid(); //Adds a grid to the html 
}); 

HTML wyglądał:

<div id="divIDer"><div> 

Ale czasami funkcja moja createGrid() jest wywoływana przed moim dzielnika jest faktycznie załadowane na stronie. Tak więc, kiedy próbuję wyrenderować moją siatkę, nie mogę znaleźć odpowiedniego elementu div do wskazania i nigdy go nie renderuję. Jak mogę wywołać funkcję po tym, jak mój div jest całkowicie gotowy do użycia?

Edit:

mam załadunku div używając ExtJS:

var tpl = new Ext.XTemplate(
'<div id="{divId}"></div>'); 

tpl.apply({ 

}); 

Answer 1

Można użyć rekurencji, żeby to zrobić. Na przykład:

jQuery(document).ready(checkContainer); 

function checkContainer() { 
    if($('#divIDer').is(':visible'))){ //if the container is visible on the page 
    createGrid(); //Adds a grid to the html 
    } else { 
    setTimeout(checkContainer, 50); //wait 50 ms, then try again 
    } 
} 

Zasadniczo ta funkcja sprawdzi, czy element istnieje i czy jest widoczny. Jeśli tak, uruchomi on swoją funkcję createGrid().Jeśli nie, poczeka 50 ms i spróbuje ponownie.

Uwaga: Idealnie byłoby użyć funkcji zwrotnej połączenia AJAX, aby wiedzieć, kiedy pojemnik został dołączony, ale jest to brutalna siła, samodzielne podejście. :)

Answer 2

dotąd, jedynym sposobem, aby "słuchać" na DOM zdarzeń, jak wstawianie lub modyfikowanie Elements , było użycie takich zdarzeń o nazwie Mutation Events. Na przykład

document.body.addEventListener('DOMNodeInserted', function(event) { 
    console.log('whoot! a new Element was inserted, see my event object for details!'); 
}, false); 

Dalsza lektura na tym: MDN

Problem z Mutation Wydarzenia był (jest) tak naprawdę nigdy nie trafiły do ​​żadnej oficjalnej specyfikacji z powodu inconcistencies i rzeczy. Po pewnym czasie zdarzenia zostały zaimplementowane we wszystkich nowoczesnych przeglądarkach, ale zostały one zadeklarowane jako przestarzałe, innymi słowy nie chcesz ich używać.

---

Oficjalna wymiana dla Mutation Wydarzenia jest przedmiotem MutationObserver().

Dalsza lektura na tym: MDN

Składnia obecnie wygląda

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     console.log(mutation.type); 
    }); 
}); 

var config = { childList: true }; 

observer.observe(document.body, config); 

W tym czasie, API zostało wdrożone w nowszych wersjach Firefox, Chrome i Safari. Nie jestem pewien co do IE i Opery. Tak więc kompromisem na pewno jest to, że możesz kierować tylko na najlepsze przeglądarki.

Answer 3

Dzięki funkcji jQuery.ready można określić funkcję, która jest wykonywana po załadowaniu DOM. Cała DOM, nie każdy element div, który chcesz.

Tak, należy użyć gotowy w nieco inny sposób

$.ready(function() { 
    createGrid(); 
}); 

to w przypadku, gdy nie używasz AJAX załadować div

Answer 4

wewnątrz elementu <div></div> można nazwać $(document).ready(function(){}); wykonać polecenie, coś jak

<div id="div1"> 
    <script> 
     $(document).ready(function(){ 
     //do something 
     }); 
    </script> 
</div> 

i można zrobić to samo dla innych div, które masz. to było odpowiednie jeśli ładujesz swój div przez częściowy widok

Answer 5

Aby zrobić coś po pewnym obciążeniu div z funkcji .load(). Myślę, że dokładnie to, czego potrzebujesz:

$('#divIDer').load(document.URL + ' #divIDer',function() { 

     // call here what you want ..... 


     //example 
     $('#mydata').show(); 
    });