Question

我有一个id为ID的DIV：我可以使用jQuery UI拖动它。一切正常，但是一旦我删除它并动态地将DIV加载到HTML中（以指定更多：使用SSE将DIV加载到HTML中），就无法拖动DIV。这是因为在DIV之前加载了jQuery。如何解决这个问题？由于我使用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呢？使用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使其可拖动。

Answer 2

我想你忘了引用，试着改变

sevr = new EventSource('test.php);

到

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

无法拖动动态添加的DIV

2 个答案: