无法拖动动态添加的 DIV

Can't drag dynamically added DIV

本文关键字：DIV 添加 动态 拖动      更新时间：2023-09-26

我有一个带有 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 的 antoher 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 呢？Div 使用 SSE 放入 HTML 中，这一切都有效。

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

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

我想你忘记了引号，试着从 

sevr = new EventSource('test.php);

自 

sevr = new EventSource('test.php');
相关文章：