如何在頁面加載（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）變爲可拖動時生成元素？

回答

相關問題