0

ajax をロードした UL のソート可能なスクリプトを実行できません。ソート可能なスクリプトは、AJAX クエリ自体と同様に問題なく動作します。しかし、ソート可能にしたい UL を 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>

どんな助けでも大歓迎です。

4

1 に答える 1

0

この部分は、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();
    }
}

sortableDOM に存在した後に呼び出す必要があります。したがって、コードを次のように変更できます。

// 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 リクエストは非同期である$('#sortable').sortable();ため、リクエストがまだ完了していないため、単純に AJAX リクエストを作成して呼び出すことはできません。

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-08T06:19:01.543 に答える