無法拖動動態添加的DIV

Question

我有一個ID為ID的DIV：TEST，可以使用jQuery UI進行拖動。 一切正常，但是一旦我將其刪除並動態地將DIV加載到HTML中（可以指定更多內容：使用SSE將DIV加載到HTML中），就不能拖動DIV。 這是因為jQuery是在DIV之前加載的。 如何解決這個問題？ 由於我使用SSE，因此DIV在一段時間內會加載幾次。

jQuery代碼：

 $(function() {
      $( "#TEST" ).draggable({ 
         containment: "parent"             
      }).css({'cursor': 'all-scroll', 'z-index': '5'});
 });

DIV TEST已加載到稱為dragZone的另一個DIV中

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

加載SSE的JS：

 //HTML5 SSE(Server Sent Event) initilization
     this.initSevr=function(){
          sevr = new EventSource('test.php');
          sevr.onmessage = function(e){ 
              if(oldata!=e.data){
                  dragZone.innerHTML+=e.data;
                  oldata = e.data;
              }
          };     
     };

那么如何再次拖動DIV？ 使用SSE將Div放入HTML中，這一切都可行。

Answer 1

您可能需要將可拖動的代碼移到loading事件中，如下所示：

 //HTML5 SSE(Server Sent Event) initilization
     this.initSevr=function(){
          sevr = new EventSource('test.php');
          sevr.onmessage = function(e){ 
              if(oldata!=e.data){
                  dragZone.innerHTML+=e.data;
                  oldata = e.data;

                  $( "#TEST" ).draggable({ 
                     containment: "parent"             
                  }).css({'cursor': 'all-scroll', 'z-index': '5'});
              }
          };     
     };

這是假設在使用innerHTML之后立即更新了DOM。 如果不是，則可能有必要使用簡短的setTimeout使其可拖動。

Answer 2

我認為您忘記了報價，請嘗試從

sevr = new EventSource('test.php);

至

sevr = new EventSource('test.php');