JQueryUI可排序僅工作一次

Question

我在頁面標題中調用JQueryUI.js，然后使用AJAX加載內容。

jQuery拖放工作一次，然后退出工作。 如果我將每個AJAX內容加載到JqueryUI.js中，則它可以工作，但這非常慢。 這是在YII框架中

所以整個事情看起來像：

page.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 ）的例子

可使用ajax排序的示例