通过 .load() 加载数据后使用 JQuery UI 的 sortable('serialize')；

Question

我有一个页面 (page1.php)，我在其中使用选择框将另一个页面 (page2.php) 加载到 DIV 中。在 page2.php 中，有一个 UL，可将数据库中的数据（通过 PHP）加载到 LI 中，并且是可排序的。

我的问题是，当我自己加载 page2.php 时，它可以很好地序列化。但是，当 page2.php 通过 .load() 加载到 page1.php 中时，它根本不会序列化并且我得到未定义。

这是重要的代码，它本身也可以正常工作，但在通过 .load() 函数加载此页面时就不行了

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
<style> 
    #thelist { list-style-type: none; margin: 0; padding: 0; width:700px; }
    #thelist li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 200px; height: 150px; }
    </style> 
<ul id="thelist">
<li style="margin-bottom:5px;" name='listItem_1' id='listItem_1'>
    test1
</li>
<li style="margin-bottom:5px;" name='listItem_2' id='listItem_2'>
    test2
</li>
<script type="text/javascript"> 
    $(function() {
        $("#thelist").sortable({ 
            update : function () { 
              var order = $('#thelist').sortable('serialize'); 
              alert(order); // This alerts "undefined" when page2.php is loaded into page1.php via .load();
              $("#info").load("reorder_slides.php?"+order); 
        }});
    });
</script> 

这是我正在运行的新代码，仍然无济于事。

<script>
    $('#edit_service_date').change(function() {
        // $(this).val()
        $('#editService').slideUp("slow",function(){
            $('#thelist').load('page2.php', {id: $('#edit_service_date').val()}, function(){
                $("#thelist").sortable({ 
                    update : function () { 
                      var order = $('#thelist').sortable('serialize'); 
                      alert(order); // This alerts "undefined" when page2.php is loaded into page1.php via .load();
                      $("#info").load("reorder_slides.php?"+order); 
                }});
                if($('#edit_service_date').val()!="none"){
                    $('#editService').slideDown("slow");
                }
            });
        });
    });
</script>

Answer 1

如果您在上面发布的所有内容都通过.load() 进入另一个页面，那么我看到（至少）两个问题：

1. 您正在加载 jQuery 和 jQuery UI 两次：一次在外部页面中，一次在通过 ajax 加载的内部页面中。没必要。
2. 您希望$(function(){}) 在加载到div 内的“内部”页面后触发。 $(function(){}) 是 $(document).ready( function(){} ) 的同义词，实际上 ready 事件已经触发（当外部页面 DOM 准备就绪时）。它不会在这里做任何事情。

您应该尝试在 .load() 的回调中触发 .sortable() 内容，以便将内部文档带入 div：

/* on page1.php */
$('#yourdiv').load( 'page2.php', function(){
    $('#thelist').sortable( /* arguments */ );
});