1

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

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

所以整个事情看起来像：

页面.php：

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

产品.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();
4

1 回答 1

2

如果不移除列表持有者（如 ul），并且里面有动态的 li 内容，那么sortable()在 ajax 调用之后就不必重新绑定。否则，你用新的 HTML 内容替换你的列表，你必须这样做。这是大卫霍斯特的例子

可使用 ajax 排序的示例

于 2013-10-22T03:05:41.103 回答