无法拖动动态添加DIV

Question

我有一个 DIV，id: 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

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

 //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'});
              }
          };     
     };

这是假设 DOM 在使用 innerHTML 后立即更新；如果不是，则可能需要使用较短的 setTimeout 使其可拖动。

Answer 2

我想你忘了引述，试着从

sevr = new EventSource('test.php);

到

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

无法拖动动态添加DIV

Can't drag dynamically added DIV

javascript

jquery

html

jquery-ui