Moin!
Hallo.
Ich möchte einen jQuery-Code extern einbinden und habe nun folgendes:
index.html [Zusammenfassung]:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jQueryCode.js"></script>
</head><body>
<div id="draggable">
2
</div>
</body>
>
> js/jQueryCode
> ~~~javascript
$(function() {
> $( "#draggable" ).draggable();
> });
Aber dies funktioniert nicht: Der Div-Block wird nicht "draggable". Binde ich aber den Code direkt in die HTML-Datein ein, funktioniert es. Woran liegt das?
Zu dem Zeitpunkt, wo der Javascript-Code ausgeführt wird, nämlich im HEAD, existiert noch kein DIV mit der ID #draggable.
Grundsätzlich gilt: Du kannst im DOM erst herumoperieren, wenn es vollständig geladen ist. Das ist mit jQuery einfach, denn dafür gibts eine passende Funktion, die schnellstmöglich, aber nicht zu früh, am DOM arbeiten lässt:
$(document).ready(function() {
// hier Dinge mit dem DOM tun, nachdem es geladen ist
});
Siehe http://api.jquery.com/ready/
- Sven Rautenberg