如何讓Javascript使用Ajax加載的內容？

我無法爲ajax加載的UL執行可排序的腳本。可排序的腳本工作得很好，就像AJAX查詢本身一樣。但是當我加載UL，我想要使用Ajax從另一個文件進行排序時，它將無法工作。下面的代碼：如何讓Javascript使用Ajax加載的內容？

<html> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <style> 
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } 
    #sortable li span { position: absolute; margin-left: -1.3em; } 
    </style> 
    <script> 
    $(document).ready(function() { 
     $("#button").click(function() { 
      AJAXGangbang('container', "sortable2.php"); 
      $('#sortable').sortable(); 
     }); 
    }); 


    function AJAXGangbang($receiver, $destination){ 

     var ajaxRequest; // The variable that makes Ajax possible! 

     try{ 
      // Opera 8.0+, Firefox, Safari 
      ajaxRequest = new XMLHttpRequest(); 
     } catch (e){ 
      // Internet Explorer Browsers 
      try{ 
       ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
      } catch (e) { 
       try{ 
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
       } catch (e){ 
        // Something went wrong 
        alert("Your browser broke!"); 
        return false; 
       } 
      } 
     } 
     // Create a function that will receive data sent from the server 
     ajaxRequest.onreadystatechange = function(){ 
      if(ajaxRequest.readyState == 4){ 
      document.getElementById($receiver).innerHTML=ajaxRequest.responseText; 
      Mediabox.scanPage(); 
      } 
     } 
     ajaxRequest.open("GET", $destination, true); 
     ajaxRequest.send(null); 

    } 
    </script> 
</head> 
<body> 

<button id="button">Get the UL</button> 
<div id="container"> 

</div> 

</body> 
</html>

這裏是一個的被加載的內容：

<ul id="sortable"> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 
</ul>

任何幫助是極大的讚賞。

來源

2012-12-08 Daniel F. Dietzel

這部分插入從AJAX請求到DOM的響應：

// Create a function that will receive data sent from the server 
ajaxRequest.onreadystatechange = function(){ 
    if(ajaxRequest.readyState == 4){ 
    document.getElementById($receiver).innerHTML=ajaxRequest.responseText; 
    Mediabox.scanPage(); 
    } 
}

你需要調用sortable後，它存在於DOM。由於AJAX請求是異步的，你不能簡單地讓AJAX請求，然後調用$('#sortable').sortable();因爲請求尚未完成

// Create a function that will receive data sent from the server 
ajaxRequest.onreadystatechange = function(){ 
    if(ajaxRequest.readyState == 4){ 
    document.getElementById($receiver).innerHTML=ajaxRequest.responseText; 
    $('#sortable').sortable(); 
    Mediabox.scanPage(); 
    } 
}

：所以，你可以修改代碼來此。

請注意，AJAXGangbang似乎是非jQuery代碼。通過使用jQuery get，您可以將其簡化爲：

$.get("sortable2.php", function(data) { 
    $('#container').html(data); 
    Mediabox.scanPage(); // not sure what this is, remove it if you don't know either 
    $('#sortable').sortable(); 
}) 
.error(function() { 
    alert("Your browser broke!"); 
});

來源

2012-12-08 06:19:01 Cymen

如何讓Javascript使用Ajax加載的內容？

回答

相關問題