Warum funktioniert ein Jquery-Code nur, wenn er am Ende meines html-body-Abschnitts steht?

Question

Ich habe den folgenden Code zum Erstellen von Registerkarten. Es funktioniert am Ende des HTML-Body-Abschnitts, aber nicht, wenn ich es am Anfang platziere - bevor alle divs definiert sind. Warum könnte das sein?

Answer 1

Sie müssen es mit einem Dokument bereit Block wickeln. Dies verhindert, dass der Code ausgelöst wird, bis die Seite vollständig geladen ist.

<script type="text/javascript"> 
    $(function() { 
     // do something on document ready 
     $("ul.tabs li.label").hide(); 
     $("#tab-set > div").hide(); 
     $("#tab-set > div").eq(0).show(); 
     $("ul.tabs a").click(
     function() { 
      $("ul.tabs a.selected").removeClass('selected'); 
      $("#tab-set > div").hide(); 
      $(""+$(this).attr("href")).show(); 
      $(this).addClass('selected'); 
      return false; 
     } 
    ); 
     $("#toggle-label").click(function() { 
     $(".tabs li.label").toggle(); 
     return false; 
     }); 
    }); 
</script> 

Answer 2

Es ist höchstwahrscheinlich, weil das DOM noch nicht fertig ist, und deshalb existieren sie nicht.

Daher müssen Sie Folgendes tun:

$(function() { 
    // Any code in here will only be executed when the DOM is ready. 
}); 

Answer 3

jQuery(function($) { 
    // put your code in here and it will be executed 
    // when the document has fully loaded. 
});