Question

I’m trying to set a focus event on all my CKEditor textareas on the page. Here’s the code that loads on jQuery document ready:

for (var i in CKEDITOR.instances) {
    alert(CKEDITOR.instances[i].name);
    CKEDITOR.instances[i].on('focus', function() {
        alert(CKEDITOR.instances[i].name);
        remove_invalidation(CKEDITOR.instances[i].name);
    });
}

(Note: remove_invalidation() is a function I wrote that just removes some CSS formatting on the textarea. It shouldn’t affect the problem.)

I added a couple alerts to see what was happening. So, right away, as expected, when the document ready event kicks off this code, I get one textarea after another with the names of each of the CKEditor textareas. That works.

But, when I click inside any of the textareas to give them focus, the alert always pops up the name of the last textarea on the page.

Answer 1

try this:

for (var i in CKEDITOR.instances) {
    (function(i){
        alert(CKEDITOR.instances[i].name);
        CKEDITOR.instances[i].on('focus', function() {
           alert(CKEDITOR.instances[i].name);
           remove_invalidation(CKEDITOR.instances[i].name);
        });
    })(i);
}

the issue was you are using the same i within each on focus event, and that i was getting incremented to the value for the last editor. Placing the code within an immediately executing function solves this problem by giving the code it’s own scope.