[Erledigt] jQuery Div erstellen und Draggable machen

[Forumsgast]

Hallo Zusammen,

ich will in einem Div meherer DIV erstellen. Diese DIV sollen aus einer MySQL DB kommen (Namen etc...). Soweit klappt das auch, nur wenn ich diese dann Verschiebbar machen will, kann ich sie nicht ansprechen.

Anbei den Code des ich dazu verwende.

$(document).ready(function() {

$("#external-events").hide();
 

$(function() {	 	

 $.getJSON("HTTP_Request/Auftrag/Auftragplanung_Externe-Events.php", function(result) {
     	 
     	 
     for (var i = 0; i < result.length; i++) {

     	$('<div/>', {'class': 'external-event', 'text': result[i].Title}).appendTo('#external-events');	
     }
     
 	}); 
 
 }); 


$("#external-events div.external-event").each(function() {


			var eventObject = {
			title: $.trim($(this).text()) 
			};

			$(this).data('eventObject', eventObject);

			
			$(this).draggable({
				zIndex: 999,
				helper: 'clone',
				revert: true,      
				revertDuration: 0  
			});

		});

      $( "#Button_Events_Extern_Eingeben" ).click(function() {
        $("#external-events").show();
            });

});

Der HTML Code dazu

<div id="Events_Extern_Eingeben">
<input type="button" name="Button_Events_Extern_Eingeben" id="Button_Events_Extern_Eingeben" value="Dialog Events Eingeben">
</div>

<div id='external-events'>
<h4>Externe Events</h4>
<hr>
</div>

Der PHP Code dazu

<?php

require "../../Config/connectDB1.php";

$EventText = array();

$sql = mysql_query("SELECT ID, Title, Start, End FROM tblExterneEvents") or die(mysql_error());

while ($row = mysql_fetch_assoc($sql)) {

$EventText[] = array('Title' => utf8_encode($row['Title']), 'Start' => $row['Start'], 'End' => $row['End']);

}

echo json_encode($EventText);

?>

Wenn ich aber im HTML Code eine DIV (Test) einfüge, kann ich diesen DIV verschieben

<div id="Events_Extern_Eingeben">
<input type="button" name="Button_Events_Extern_Eingeben" id="Button_Events_Extern_Eingeben" value="Dialog Events Eingeben">
</div>

<div id='external-events'>
<h4>Externe Events</h4>
<hr>
<div class='external-event'>Test</div>
</div>

Ich denke das Problem liegt hier

$("#external-events div.external-event").each(function() {

Leider verstehe ich nicht wie ich die erstellten DIV ansprechen muss, kann mir da jemand einen Denkanstoß geben.

Gruß Marvin75

[Forumsgast]

$(document).ready(function() {

$("#external-events").hide();
 

$(function() {	 	

 $.getJSON("HTTP_Request/Auftrag/Auftragplanung_Externe-Events.php", function(result) {
     	 
     	 
     for (var i = 0; i < result.length; i++) {

     	$('<div/>', {'class': 'external-event', 'text': result[i].Title}).appendTo('#external-events');	
     }
     
 	}); 
 
 }); 



      $( "#Button_Events_Extern_Eingeben" ).click(function() {
        $("#external-events").show();

        $("#external-events div.external-event").each(function() {


			var eventObject = {
			title: $.trim($(this).text()) 
			};

			$(this).data('eventObject', eventObject);

			
			$(this).draggable({
				zIndex: 999,
				helper: 'clone',
				revert: true,      
				revertDuration: 0  
			});

		});


            });

});

Problem gelöst. jQuery hatte die Div nicht gefunden. So wie oben funktioniert es jetzt.