jQuery Text Editor (jqte), using change event

Question

I am trying to write some code for change() event using jQuery Text Editor (jqte), I have two functions which give jqte functionality to textarea's

One for editors loaded with JavaScript, when clicking some elements in a page:

function onLoadEditor(){
    jQuery(".comment-editor").jqte({
        // some jqte params, such as fsize: false,indent: false...
        change: function(){ observeEditor(); }
    });
}

And other, generic function, for pages with one single editor

jQuery(function() {
    jQuery(".comment-editor").jqte({
        // some jqte params, such as fsize: false,indent: false...
        change: function(){ observeEditor(); }
    });
});

I want to access the id of the concrete textarea (all textareas in the page have an id) which has fired the change() event

How should I write observeEditor() function to achieve this? Or... how I should define the function in jqte change property?

score 0 · Accepted Answer · edited May 23 '17 at 10:26

After reading this jQuery blur event with ID and value I have solved it, with following code (simplified)

function onLoadEditor(){
    jQuery(".comment-editor").each(function(idx, elem) {
        jQuery(this).jqte({
            // some jqte params, such as fsize: false,indent: false...
            change: observeEditor(elem.id),
    });
}

jQuery(function() {
    onLoadEditor();
});

But now I have another problem...

As you can read in the original question, onLoadEditor() is called when clicking some elements in a page. Then another javascript function jsComment() is called, builds a form (with a textarea.comment-editor field included) and it is rendered this way

function jsComment(){
    ...
    var form = '<div class="comments_wrapper ... ';
    jQuery(form).insertAfter(some_element).fadeIn('fast');
    onLoadEditor();
}

Problem is change() event is being fired only once, when form fades in, while the idea is the opposite, event should fire when user adds some text, not when appearing... Any tips?

UPDATE After reading Event binding on dynamically created elements? I have solved it this way

function onLoadEditor(){
    jQuery('.comment-editor').each(function(idx, elem) {
        jQuery(this).jqte({
            // some jqte params, such as fsize: false,indent: false...
        });
        jQuery(document).on('change', 
            jQuery('.comment-editor'), 
            function(){ 
                observeEditor(elem.id); 
            }
        );
    });
}

jQuery(function() {
    onLoadEditor();
});

Although finally I am not using change() event, as it was being fired constantly. Performing better with keyup() & paste(), for instance

jQuery Text Editor (jqte), using change event

1 Answers1