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()被带入另一个页面，那么我会看到（至少）两个问题：

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

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

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

在via .load（）中加载数据后使用JQuery UI的可排序（'serialize'）;

1 个答案: