Hallo,
ich habe ein Array aus Zahlen. Je Element erstelle ich ein div und mache es mit jquery "draggable". Das funktionert. Nun möchte ich das Array per "$.ajax({..." dynamisch füllen. Das geht auch. Wenn ich nun aber meine Funktin zum erstellen und "draggable" machen aus "$.ajax({...})" heraus aufrufe, werden die divs zwar auch erstellt, sind aber nicht mehr "draggable".
Hier der Code:
Ich habe dem "$.ajax({...})" ein "error: function(){..." verpasst damit man es auch ohne die "adminJson.php" testen kann. Die Funktion, welche die divs baut macht diese nur "draggable" wenn sie von außerhalb der "$.ajax({...})" heraus aufgerufen wird.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.myDraggable{
width: 150px; height: 150px;
border: 1px red solid;
}
#myContainer{
border: 1px silver solid;
height: 600px;
width:400px;
}
</style>
<script>
$(document).ready(function(){
$.ajax({
type: "POST",
url: "adminJson.php",
data: "action="+"getMyElems",
success: function(data){
myList = $.parseJSON(data);
//loadElems(); //Elemente werden geladen, sind aber nicht draggable.
},
error: function(){
//loadElems(); //Elemente werden geladen, sind aber nicht draggable.
}
});
//loadElems(); //Elemente werden geladen und sind draggable.
});
$(function() {
$( ".myDraggable" ).draggable();
});
function loadElems(){
myList = new Array("1", "2", "3");
var container = $("#myContainer");
for(i = 0; i < myList.length; i++){
newElem = document.createElement("div");
newElem.id = myList[i];
newElem.className = "myDraggable";
newElem.innerHTML = myList[i];
container.append(newElem);
}
}
</script>
</head>
<body>
<div id="myContainer">
</div>
</body>
</html>
Was muss ich tun, damit die divs auch bei Aufrufen der Funktion "loadElems()" aus "$.ajax({...})" heraus "draggable" sind?
Gruß
Ines