Question

I am trying to use on event. Code

$(".draggable").on("mouseover", function () {
                if (!$(this).data("init")) {
                    $(this).data("init", true).draggable();
                }
});

but the above code is not working. The draggable plugin is not apply on elements. Now if i replace the on event with live then it starts working. Code

$(".draggable").live("mouseover", function () {
                if (!$(this).data("init")) {
                    $(this).data("init", true).draggable();
                }
});

can anybody explain me what i am doing wrong ?

Answer 1

If .live() works, then that likely means that the element you’re manipulating is not present when the code runs.

This either means you are not waiting for the DOM to be ready before running the code, or you need to use the delegated version of .on instead.

$(function() {
    $(document).on("mouseover", ".draggable", function () {
                    if (!$(this).data("init")) {
                        $(this).data("init", true).draggable();
                    }
    });
});

You should replace document with a selector for the deepest nested container that contains all the .draggable elements.