Nick Petrie Nick Petrie -4 years ago 145
jQuery Question

CKEditor loop only works on the last instance

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download