Jquery How to use .live on draggable

Question

I am using dragabble method from jquery ui. How to apply live() on draggable.

$("#image").draggable({ containment: [10, 150, 0, 0], scroll: false});

What I tried is this

$("#image").live("draggable", function () {
.draggable({ containment: [10, 150, 0, 0], scroll: false});

But this is not working.

Thanks

Answer 1

Firstly as an FYI, live is deprecated, you should be using .on() as the comments above state.

Secondly, you won't be able to do what you need to do with either scenario as those events aren't baked into on(). Therefore the way that I would approach it is to perform your event attachment inside a function:

function doDraggable() {
    $(".draggable").draggable({ containment: [0, finalHeight, 0, 0], scroll: false});
}

Then initialise it when the document is ready and also whenever ajax completes:

$(document).ready(function () {
    doDraggable();
});
$(document).ajaxComplete(function () {
    doDraggable();
});

You can be more specific than the document selector using the ajaxComplete event so that it doesn't fire for every ajax event, but you get my drift...