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

【问题标题】：How can I get Javascript to work with Ajax loaded content?如何让 Javascript 与 Ajax 加载的内容一起使用？
【发布时间】：2012-12-08 04:47:29
【问题描述】：

我在为加载 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>

非常感谢任何帮助。

【问题讨论】：

标签： jquery ajax jquery-ui-sortable

【解决方案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!");
});

【讨论】：