JQueryUI可排序仅工作一次

Question

I calling JQueryUI.js in a page header then loading the content with AJAX.

Jquery drag and drop works one time then quits working. If I JqueryUI.js with every AJAX content load it works, but that is extremely slow. This is in YII framework

So the whole thing looks like :

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> 

This namespacing strategy works for all my other JS, but doesn't work for Jquery.ui.js ... it applies the sortable method and I am able to drag and drop one time, but then it no longer works.

The working option, which is not ideal, is:

_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

If you don't remove the list holder (such as ul), and you have dynamical li content inside it, you won't have to rebind sortable() after ajax call. Otherwise, you replace your list with new HTML content, you have to do it. Here is example of David Hoerster

Example sortable with ajax