如何在页面加载（ajax）变为可拖动时生成元素？

我在我的页面上有一个div，通过ajax调用每隔2000ms分开一次php脚本。当用户选中一个复选框时，更新时间间隔将停止，并且div中的所有项都需要变为可拖动状态。如果我这样做没有更新间隔它的作品，但一旦我有div重新加载项目松散他们的可拖动性。我如何维护他们的可拖动的属性？如何在页面加载（ajax）变为可拖动时生成元素？

<SCRIPT LANGUAGE="JavaScript"> 
    $(window).load(function() { 
     getScreen(); 
    }); 


    var editMode = false; 
    var intervalId = window.setInterval(getScreen ,2000); 

    function getScreen() { 
     if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
     } 
     else 
     {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
      document.getElementById("refresh").innerHTML=xmlhttp.responseText; 
      } 
     } 
     xmlhttp.open("POST","getScreen.php?sid="+<?php echo $sid; ?>,true); 
     xmlhttp.send(); 

    } 

    function onEditMode(cb) { 
     if(cb.checked) { 
     editMode = true; 
     $('.item').draggable('enable'); 
     window.clearInterval(intervalId); 
     } 
     else { 
     editMode = false; 
     $('.item').draggable('disable'); 
     intervalId = window.setInterval(getScreen ,2000); 
     } 
    } 

    </SCRIPT> 
    </head> 
    <body> 

    <div id="content">  
     <div class="post">    
     <div id="refresh"> 
     </div>  
     </div>   
    </div>

来源

2011-09-02 Brian

我认为使用框架的好处很简单..您为什么要编写自己的XHR请求？ http://api.jquery.com/jQuery.ajax/。而对于你的问题：看看文档.. – pduersteler

在覆盖容器HTML后，您应该使项目在Ajax回调中可拖动/不可拖动。由于一旦HTML被覆盖，所有附加的DOM侦听器都将丢失。

var refresh = $('#refresh'); 
refresh.html(xmlhttp.responseText); 
$('.item', refresh).draggable('enable');

是的，正如@pduersteler所说，jQuery具有优秀的Ajax功能。 ~~load()方法正是你所做的 - 将HTML加载到容器中。~~$.post()是一种方式。

另外，您最好用setTimeout代替setInterval，在Ajax回调内。它将确保更平滑的更新体验。

var postData = { sid: <?=sid?> }; 

var container = $('#refresh'); 

var ajaxCallback = function (data) { 
    container.html(data); 

    var items = $('.item', container); 

    if (editMode) { 
     items.draggable('enable'); 
    } else { 
     items.draggable('disable'); 
     setTimeout(getScreen, 2000); 
    } 
}; 

function getScreen() { 
    $.post('/getScreen.php', postData, ajaxCallback); 
} 

getScreen();

来源

2011-09-02 07:39:32 katspaugh

感谢您的好评，但似乎aaxaxCallback函数仍然在.load（）方法填充div之前调用，所以项目不可变为可拖动。我在回调函数中放置了一个调试中断，并在加载div之前被调用。 – Brian

那么你就必须使用'$ .post（）'，我想。查看更新的答案。 – katspaugh

我得到与.post（）相同的行为。即使我在$（'＃refresh'）。html（data）之后立即停顿，该div尚未加载。 – Brian

如何在页面加载（ajax）变为可拖动时生成元素？

回答

相关问题