WP Javascript Jquery funktioniert nicht

Keithkeith

Hallo,
ich versuche gerade folgendes in meinem WP Theme einzubinden.
[CODE]<!doctype html>
<html lang="en">
<head>

<style>
#makeMeDraggable { width: 300px; height: 300px; background: red; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jque…0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jque…query-ui.min.js"></script>

<script type="text/javascript">

$( init );

function init() {
$('#makeMeDraggable').draggable();
}

</script>

</head>
<body>

<div id="content" style="height: 400px;">
<div id="makeMeDraggable"> </div>
</div>

</body>
</html>

[CODE]

Wenn ich nun testweise Das Scriptzeug (Css und JS) in die header-php einfüge und
den Rest entsprechend testweise in index.php
funktioniert leider das drag and drop nicht.

woran kann das denn liegen?

Gruß Keith

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Keithkeith

Muss ich das Javascript irgendwie besonders einbinden?
Geht es nicht über die Einbindung im Header usw.?

Niemand eine Idee?

Gruß Keith

pixselig

Jquery wird bei dir vermutlich im compatibility Mode: http://digwp.com/2011/09/using-…y-in-wordpress/ laufen.

Ansonsten schaue dir mal an was die Console deines Browsers sagt.

Keithkeith

Hallo und Danke für die Antwort,
es gibt da wohl viele Möglichkeiten.
Ehrlich gesagt, verstehe ich gerade nicht so richtig wie und was nun das richtige, bzw. einfachste ist.
Was meinst Du denn mit Browserconsole?
wp_enqueue_script("jquery"); in die function.php einfügen?
Leider blicke ich durch den ganzen Quellcode nicht wirklich durch :-(

Gruß Keith

NDDT

Es wird wahrscheinlich das du anfängst deine Seite zu manipulieren bevor sie komplett geladen ist.

Code

[COLOR=#333333][FONT=source-code-pro]$( document ).ready([/FONT][/COLOR][COLOR=#333333][FONT=source-code-pro][B]function[/B][/FONT][/COLOR][COLOR=#333333][FONT=source-code-pro]() {[/FONT][/COLOR]    console.log( [COLOR=#DD1144]"ready!"[/COLOR] );


[COLOR=#333333][FONT=source-code-pro]});[/FONT][/COLOR]

Wenn du deine jQuery-code in die Funktion oben einfügst wird er erst ausgeführt wenn die Seite komplett geladen ist.

Keithkeith

Hi,
in welche funktion und an welcher Stelle?
meinst du diese hier?

Zitat

[COLOR=#333333][FONT=source-code-pro]$( document ).ready([/FONT][/COLOR][COLOR=#333333][FONT=source-code-pro]function[/FONT][/COLOR][COLOR=#333333][FONT=source-code-pro]() {[/FONT][/COLOR]
$( init );
function init() {
$('#makeMeDraggable').draggable();
}
console.log( [COLOR=#DD1144]"ready!"[/COLOR] );
[COLOR=#333333][FONT=source-code-pro]});
[/FONT][/COLOR]

Alles anzeigen

Meinst du also eine Funktion in einer Funktion?

Gruß Keith

NDDT

wo du die funktion init hinmachst ist in dem fall egal. Mach sie außerhalb.

Der Funktionisaufruf muss dazwischen.

Keithkeith

Hi,
hab einen Knoten im Kopf!
meine header sieht jetzt so aus:

Zitat


<style>
#makeMeDraggable { width: 300px; height: 300px; background: red; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jque…0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jque…query-ui.min.js"></script>

<script type="text/javascript">

jQuery( init );

function init() {
jQuery('#makeMeDraggable').draggable();
}

</script>


Alles anzeigen

und meine index so:

Zitat

<div id="content" style="height: 400px;">
<div id="makeMeDraggable"> </div>
</div>

Funktioniert nicht!

sowas hier:

Code

<script type="text/javascript">


$( document ).ready(function() {
console.log( "ready!" );
});


$( init );


function init() {
$('#makeMeDraggable').draggable();
}


</script>

Alles anzeigen

bringt auch nichts, auch nichts in der Firebug Konsole.
Frust!
... und welchen funktionsaufruf meinst du denn? da is doch keiner?

Gruß Keith

pixselig

Versuche es mal so:

HTML

<script type="text/javascript">   
jQuery( document ).ready(function( $ ) {


$( init );


function init() {
$('#makeMeDraggable').draggable();
}


});
</script>

Alles anzeigen

bzw, könntest du für so etwas simples auch die funktion ganz weglassen und nur

HTML

<script type="text/javascript">   
jQuery( document ).ready(function( $ ) {


$('#makeMeDraggable').draggable();


});
</script>

schreiben.

Wenn das nicht funktioniert überprüfe die ID(nicht Klasse!!)-Schreibweise des zu manipulierenden Elements ncohmal genau.

Wenn das auch nichts bringt, dann postste einen Link zum Problem.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

WP Javascript Jquery funktioniert nicht

Jetzt mitmachen!