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

Posted 2023-02-24

【中文标题】通过 .load() 加载数据后使用 JQuery UI 的 sortable(\'serialize\')；

【英文标题】：Using JQuery UI's sortable('serialize') after loading data in via .load();通过 .load() 加载数据后使用 JQuery UI 的 sortable('serialize')；

【发布时间】：2011-03-27 12:09:12

【问题描述】：

我有一个页面 (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>

【问题讨论】：

您正在将以上所有内容加载到另一个页面中的 div 中，该页面也有自己的 jQuery 和 ready() 处理程序？

你不能使用 $(function());在通过 Ajax 检索的 JS 代码内部，但仅在“常规”页面加载时。相反，您需要定义一个从 Ajax 回调的 onComplete 方法调用的新 JS 初始化函数。

【参考方案1】：

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

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

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

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

【讨论】：

肯，感谢您的意见。我尝试了您的建议，但无济于事。另外，我想指出，我不想在页面加载时进行序列化，而是在可排序函数更新时进行序列化。我已经用我正在运行的新代码更新了我的第一篇文章。

Nick，在您修改后的代码中，您似乎有一个 id 为 thelist 的元素（容器——这应该是一个 div 吗？），您应用了 @987654333 @...然后在回调中将.sortable() 应用于同一个ID。因此，您正在加载到一个 id，并且在加载的内容中，您有一个具有相同 id 的列表 - 然后您试图使该模棱两可的 id 可排序？

Ken，我尝试将 LI 加载到 UL (#thelist) 中，看看是否将 UL 保留在主页上会使其序列化。此方法不起作用，但截至目前，我正在将整个 UL 加载到一个 div 中，#editService

Ken，我回去重读了你的第一篇文章。在第二页中删除对 j​​query 和 jquery-ui 的调用后，它工作正常......非常奇怪，但我有点不高兴我浪费了几个小时。感谢您愿意提供帮助，如果我可以投票支持您的回答，我会这样做！

尼克，很高兴听到你解决了问题。