Question

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

Jquery拖放工作一次然后退出工作。如果我JqueryUI.js加载每个AJAX内容它的工作原理，但这是非常缓慢的。这是在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 ...它应用了可排序方法，我可以拖放一次，但后来它不再有效。

工作选项，不太理想，是：

_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

JQueryUI可排序只能工作一次

1 个答案: