cod javascript functional in body si nefunctional in head

[sterica]

Salutare,

Am urmatorul cod js ce depinde de jQuery:

Cod: Selectaţi tot

		<script type="text/javascript">

			$(".parent").each(function(index){
				var group = $(this).data("group");
				var parent = $(this);
	
				parent.change(function(){  //"select all" change 
		 			$(group).prop('checked', parent.prop("checked"));
				});
				$(group).change(function(){ 
					parent.prop('checked', false);
					if ($(group+':checked').length == $(group).length ){
						parent.prop('checked', true);
					}
				});
			});

		</script>

Daca il pun in head sau in fisier extern nu functioneaza, daca il pun in body este perfect functional, de ce functioneaza asa?

Multmesc!

Trebuie sa intelegi putin cum are loc incarcarea unei pagini de catre browser. Pe masura ce are loc incarcarea documentului, daca se intilneste js (inline sau extern, utilizind tag-ul script) acesta se executa sincron, oprind astfel incarcarea de mai departe a documentului.
Deci daca pui codul tau in head, cind browserul ajunge la el incearca sa-l execute. In exemplul tau, se cauta in pagia toate elementele care au clasa .parent se transforma in collectie jQuery dupa care, pentru fiecare se executa o functie. In acest moment insa in pagina inca nu exista incarcate nici un element care are clasa .parent, acestea se vor incarca, mai tirziu, in body.
Daca codul tau js va fi inclus la coada lui body atunci, elementele .parent vor exista probabil (daca nu ai uitat sa le scrii in html) astfel vei vedea efectul dorit.
Pentru a incarca totusi codul js in head, de obicei se utilizeaza .ready(), care executa o functie dupa incarcarea paginii unui element (de obicei se utilizeaza document)

Cod: Selectaţi tot

$(document).ready(function() {
	// cod js care se executa dupa ce s-a incarcat toata pagina
	// (aici poti plasa codul tau js)
});

Insa nu este o buna practica sa incluzi utilizezi js in head, se recomanda ca js sa fie inclus cit mai tirziu posibil pentru a nu "bloca" incarcarea paginii.