Can't drag dynamically added DIV

Can't drag dynamically added DIV

I have a DIV with id: TEST that I can drag using jQuery UI. All works, but as soon as I remove it and load the DIV into the HTML dynamically (well to specify more: using SSE to load the DIV into the HTML), the DIV can't be dragged. This is because the jQuery is loaded before the DIV is. How to fix this? Since I use SSE, the DIV is loaded several times over a period of time and must stay draggable.

The DIV looks like this in the TXT file (which is loaded into the HTML)

  1. <div id="TEST" class="chatmsg" style="left: 200px; top: 200px;"><b>Bami</b>: Pangang<br/></div>


This DIV (with ID: TEST) is loaded into another DIV called dragZone

  
  1. <div id="dragZone" name="dragZone"> [div TEST is loaded here] </div>

The jquery code in the HTML:

 
  1. $(function() {
  2. $( "#TEST" ).draggable({
  3. containment: "parent"
  4. }).css({'cursor': 'all-scroll', 'z-index': '5'});
  5. });
The JS code that loads the SSE (which pushes the content of txt file everytime it changes):
    
  1. //HTML5 SSE(Server Sent Event) initilization
  2. this.initSevr=function(){
  3. sevr = new EventSource('test.php');
  4. sevr.onmessage = function(e){
  5. if(oldata!=e.data){
  6. dragZone.innerHTML+=e.data;
  7. oldata = e.data;
  8. }
  9. };
  10. };
So how can I drag the DIV again everytime the DIV is "pushed" into the HTML?
I've tried putting the jquery part into the SSE part, but that had no effect