Add a button after loading TinyMCE via JQuery and it's not working

Question

I'm loading TinyMCE via JQuery and after it's loaded, I'd like to add a save button to it. The save button is calling a function but Firebug says the function is not defined, in this case destroyTinyMCE() is not defined. What's wrong?

$('div#introText').click(function() {
        loadTinyMCE();
        $('div#introText').after('<input value="Save" onclick="destroyTinyMCE();" type="button">');
});

function loadTinyMCE() {
//some variable
}

function destroyTinyMCE() {
       $('div#introText').tinymce().destroy();
       $('div#introText').tinymce().remove();
}

Answer 1

If this is inside your document.ready handler, then that destroyTinyMCE function is scoped only to it, and when looking for it in the global namespace (as onclick="destroyTinyMCE();" will do), it won't be there. Instead attach the click handler when creating it, like this:

$('<input value="Save" type="button">').click(destroyTinyMCE)
                                       .insertAfter('div#introText');

This will reference the function correctly and it can still be tucked away inside whatever closure you're in currently.