Element is getting ui-resizable but not ui-resizable-handle

Question

I have a list of elements that I am trying to add jQuery UIs resizable functionality to after loading them and they are getting the class ui-resizable, but the div with the class ui-resizable-handle is not being added.

First I start with (and before you ask, yes I have peeled away some code that is not required in the example)...

function setElementsAsResizable(elements, isResizable) {
    elements.each(function () {
        var element = $(this);
        if (element.is(':data(ui-resizable)'))
            element.resizable("destroy");
        if (isResizable)
            element.addClass("resizable");
        }
        else {
            if (element.hasClass("resizable"))
                element.removeClass("resizable");
        }
    });
}

This is is so I start with a clean slate, just in case the elements are no longer resizable. After this I create the elements.

function createResizableElements(row) {
    var element = row.children(".element.resizable");
    element.resizable({
        handles: 'e',
        containment: 'parent',
        create: function (event, ui) {
            $(this).parent().on('resize', function (e) {
                e.stopPropagation();
            });
        },
        start: function (event, ui) {...},
        resize: function (event, ui) {...},
        stop: function (event, ui) {...}
    });

So all of my elements have now been bestowed with the ui-resizable, but not all of them have have not received the div ui-resizable-handle which renders the whole thing unusable. The elements are also sortable (which works) and when I drag and drop them they go through the same process, but have now been given ui-resizable-handle.

So in short, does anyone know how an element can be set as ui-resizable, but not get the handle that is needed to actually resize?

Answer 1

Well this is embarrassing. Apparently, this is due to a bug in jQueryUI and the answer on how to fix that exists here:

How do I destroy a jquery resizable without destroying child resizables?

Short summation: You call destroy on an element it will remove that elements jQueryUI behaviour and remove the handle for all of that element's children that happen to have one.

I have to stop finding library bugs while coding with jQueryUI that are hard to search for.