在从X-可编辑jQuery库生成的Textarea字段上运行Textarea Resizer jQuery插件

Question

将StackOverflow所使用的jQuery TextareaResizer jquery.textarearesizer.js库添加到我们在jQuery编辑位置库X-Editable中使用的textarea表单字段中

我在http://codepen.io/jasondavis/pen/KpWybW上有一个Textarearesizer.js插件的简单工作演示，该插件将Drag Hanlde添加到了textarea字段，并允许您单击并拖动以调整大小。

然后，我尝试在该JSFiddle上添加相同的JavaScript代码，使其在X-Editable生成的Textarea字段上工作： http : //jsfiddle.net/jasondavis/xBB5x/8558/

X可编辑JavaScript：

$('#description').editable({
    type: 'textarea',
    url: '/post',    
    pk: 1,    
    inputclass: 'task_description resizable',
    highlight: '#F1FFE7',
    mode: 'inline', // inline | popup
    placement: 'top',
    title: 'Enter Task Description',  
    validate: function(value) {
        if ($.trim(value) === '') {
            return 'Task Description is Required';
        }
    },
    params: function(params) {
        //Addition params in addition to the default: pk, name, value
        params.userId = 1;
        params.projectId = projectTaskModal.cache.projectId;
        params.taskId = projectTaskModal.cache.taskId;
        return params;
    },
    success: function(response, newValue) {
        if (!response.success) return response.msg;
    }
});

Textarea Resizer JavaScript：

/* jQuery textarea resizer plugin usage for Textarea */
$(document).ready(function() {
    $('textarea.resizable:not(.processed)').TextAreaResizer();
});

我没有收到任何错误消息，但是Textarea字段未运行调整大小代码。

在JSFiddle演示http://jsfiddle.net/jasondavis/xBB5x/8558/上 ，单击Text时，将显示Textarea。

我认为这可能与$('textarea.resizable:not(.processed)').TextAreaResizer();时不可见的Textarea有关$('textarea.resizable:not(.processed)').TextAreaResizer(); 因为X-Editable直到单击文本后才显示Textarea，所以运行了代码。

我也尝试这样做：

$('#description').on('init', function(e, editable) {
    $('textarea.resizable:not(.processed)').TextAreaResizer();
});

当可编辑字段初始化时，它将运行我的回调代码

Answer 1

我明白了。 直到我调用TextareaReizer插件之后，DOM中才生成了X-Editable生成的MY Textarea。

解决方案是使用此事件，该事件在DOM中显示textarea形式后运行。

$('#description').on('shown', function(e, editable) {
    $('textarea.resizable:not(.processed)').TextAreaResizer();
});

在这里工作的最终解决方案演示http://jsfiddle.net/jasondavis/xBB5x/8559/