Question

我的页面上有一个div，它通过ajax调用填充每隔2000ms单独的php脚本。当用户选中复选框时，更新间隔将停止，并且div中的所有项目都需要变为可拖动。如果我这样做没有更新间隔它可以工作，但一旦我有div重新加载项目松动他们的可拖动性。我如何保持他们的可拖动财产？

<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>

Answer 1

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

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

是的，正如@pduersteler所说，jQuery具有出色的Ajax功能。 ~~load()方法完全按照您的方式执行操作 - 将HTML加载到容器中。~~ $.post()是一种方法。

此外，您最好使用Ajax回调中的setInterval 替换setTimeout。它将确保更顺畅的更新体验。

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();

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

1 个答案: