How do I make elements that are generated after page load (ajax) become draggable?_问答_开发者

How do I make elements that are generated after page load (ajax) become draggable?

开发者 https://www.devze.com 2023-04-01 18:34 出处：网络

I have a div on my page that gets populated via an ajax call to separate php script every 2000ms.When the user checks a checkbox, the update interval stops and all the items in the div need to become

I have a div on my page that gets populated via an ajax call to separate php script every 2000ms. When the user checks a checkbox, the update interval stops and all the items in the div need to become draggable. If I do this without the update interval it works, but once I have the div reloading the items loose their draggability. How can I maintain the their draggable property?

<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">            
      开发者_如何学Go   <div id="refresh">
         </div>     
      </div>        
    </div>

You should make items draggable/non-draggable in the Ajax callback after you overwrite the container HTML. Since once is HTML overwritten, any attached DOM listeners are lost.

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

And yes, as @pduersteler said, jQuery has excellent Ajax facilities. ~~load() method does exactly what you do — loads HTML into a container.~~ $.post() is a way to go.

Also, you'd better replace setInterval with a setTimeout inside the Ajax callback. It will ensure smoother update experience.

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