How to bind JQuery UI Sortable widget to html loaded via Ajax?

Question

This is probably a simple question.

I have the following javascript/jquery:

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

    },
    stop: function (e, ui) {

    }
});

The .combo-table class div is loaded via Ajax. When I refresh the page the above works fine but if I load the content through Ajax it doesn't work. How can I have it bind even if I load the content later?

Answer 1

Just do it in your success callback

$.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) {

          }
       });
      }
    });

If you do not want to fire this in every ajax call, you can add flags such as custom attributes after you initialize the sortable like

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

and then check for it before initializing the sortable

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