如何将JQuery UI Sortable小部件绑定到通过Ajax加载的html？

Question

这可能是一个简单的问题。

我有以下javascript / jquery：

$('body .combo-table').sortable({
    handle: '.grabber',
    opacity: 0.9,
    axis: 'y',
    start: function (e, ui) {

    },
    stop: function (e, ui) {

    }
});

.combo-table类div通过Ajax加载。 当我刷新页面时，以上效果很好，但是如果我通过Ajax加载内容，则无法正常工作。 即使稍后加载内容，如何绑定它？

Answer 1

只需在您的成功回调中完成

$.ajax(
      {url: "demo_test.txt", 
      success: function(result){
      ...whatever code you use to update the DOM...
      $('body .combo-table').sortable({
          handle: '.grabber',
          opacity: 0.9,
          axis: 'y',
          start: function (e, ui) {

          },
          stop: function (e, ui) {

          }
       });
      }
    });

如果您不想在每个ajax调用中都触发此操作，则可以在初始化sortable之类的方法后添加诸如自定义属性之类的标志

$('body .combo-table').attr('data-is-sortable');

然后在初始化可排序对象之前检查它

if($('body .combo-table:not([data-is-sortable])')
//initialize sortable