Jquery ui Resizable句柄在append元素函数中不起作用

Question

我正在使用jQuery UI Resizable，我将使用custom handles。要做到这一点，我会关注this answer，但我会遇到像this这样的问题，所以我尝试了他们的答案，但仍然无法正常工作。有人可以帮助使这个工作吗？这是我的小提琴问题https://jsfiddle.net/suiko/155zzw2p/3/

$(document).on({mouseenter: function (e) {
    var elmnt_col = $(this);
    $(elmnt_col).append("<div class='overlay' id='overlay-column'><div class='overlay-menu-action' id='overlay-menu-column'><div class='overlay-label' id='overlay-label-column'>Column</div></div></div>");

    $(elmnt_col).find('#overlay-column').append("<div class='resize-handle ui-resizable-handle ui-resizable-e' id='right-resize-handle'></div>");
    $(elmnt_col).resizable({
        handles: {
            e: '#right-resize-handle'
        }
    });
}, mouseleave: function (e) {
        $("#overlay-column").remove();
    }}, ".custom-column");