javascript - 无法拖动动态添加的DIV

Question

我有一个 ID 为 TEST 的 DIV，我可以使用 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

您可能需要将可拖动代码移动到加载事件中，如下所示:

 //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 使其可拖动。