Question

我无法为加载ajax的UL执行可排序脚本。可排序脚本的工作正常，AJAX查询本身也是如此。但是当我使用Ajax加载我想要从另一个文件中排序的UL时，它将无法工作。这是代码：

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

非常感谢任何帮助。

Answer 1

这部分将来自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();
    }
}

在DOM中存在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();
    }
}

因为AJAX请求是异步的，所以您不能简单地发出AJAX请求，然后调用$('#sortable').sortable();，因为请求尚未完成。

请注意，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!");
});

如何让Javascript与Ajax加载的内容一起使用？

1 个答案: