JQueryUI sortable 只能工作一次

Question

我在页眉中调用 JQueryUI.js，然后使用 AJAX 加载内容。

Jquery 拖放工作一次然后退出工作。如果我使用 JqueryUI.js 加载每个 AJAX 内容，它就可以工作，但这非常慢。这是在 YII 框架中

所以整个事情看起来像：

页面.php：

$cs->registerScriptFile($baseUrl . '/js/jquery.ui.js');
$cs->registerScriptFile($baseUrl . '/js/product.js');

product.js：

// need to namespace this to get access to jquery.ui.js sortable function
(function($) {
    SORTABLE = {
      mySortable: function(inputId) {
        $('#sortable-list-left').sortable();
        $('#sortable-list-right').sortable();
      }
     };
}(jQuery));

$(document)
  .ready(function() {
      function loadRecord(id, sku) {
      $.ajax({
        data: "id=" + id + "&sku=" + sku + "&project_id=" + urlParam("project"),
        url: "/product/ajaxGetRecord",
        type: "POST",
        success: function(response) {
          // process JSON response
          var obj = jQuery.parseJSON(response);
          // update the html with the new info
          $("#productForm")
            .html(obj.form);
          (function() {
            SORTABLE.mySortable(urlParam("project"));
          })();
        }
      });
   });

_pagePartial.php：

 <div id="productForm">  
    // dynamic content filled in here
 </div> 

这种命名空间策略适用于我所有的其他 JS，但不适用于 Jquery.ui.js ...它应用了 sortable 方法，我可以拖放一次，但它不再起作用。

不理想的工作选项是：

_pagePartial.php：

   // called every single ajax update ... ugh! 
   $cs->registerScriptFile($baseUrl . '/js/jquery.ui.js');
   $('#sortable-list-left').sortable();
   $('#sortable-list-right').sortable();

Answer 1

如果你不移除列表持有者（例如 ul），并且你在其中有动态的 li 内容，你将不必在 ajax 调用后重新绑定sortable()。否则，你用新的 HTML 内容替换你的列表，你必须这样做。 这是David Hoerster 的示例

Example sortable with ajax