Jquery UI - Bind the Selectable on future elements

Question

I have a container div ".thumbList" that contains thumbnails as < li >. I have bind the jquery UI selectable with it like this:

$(".thumbList").selectable();

Now, when I click on some other tab, the container div changes with a new container div (same class .thumbList) using Ajax.

I have to apply the selectable on the new container as well. Right now what I am doing is to re-assign the binding on the element. But there are lots of codes that i am using within the selectable code, and by using this again on ajax response, I am duplicating the code in this page again. That is not good for maintainability of code. I think this can be solved with ".on" but not sure about the event that will bind it for page load and ajax load complete both.

Answer 1

Keep $(".thumbList").selectable(); in a separate function in main page.

function iniThumbList(){
    $(".thumbList").selectable( /* wt ever the your remaining code */);
}

After document initialization call iniThumbList(); This is the initial behavior of your code. Now After the ajax completion when you have new content inside the DOM call iniThumbList(); This way you don't have to repeat the code and it's easy to read it even at a later time.

$.ajax({
    url: "test.html"
    })
    .done(function( html ) {
          $( "#results" ).append( html );
          iniThumbList();
    });