JQuery should target a class in a TinyMCE plugin

Question

i wrote a Plugin for Wordpress to enhance the TinyMCE functions. I include the js file into the admin panel via this code:

add_action('admin_print_scripts', 'admin_head_js');
function admin_head_js() {
    $myJSFile =  plugins_url( 'a2m_functions.js', __FILE__ ) ;
    wp_enqueue_script( 'a2m_functions_js',$myJSFile,false,'1.0');
}

The TinyMCE plugin looks like this:

// closure to avoid namespace collision
(function(){
    // creates the plugin
    tinymce.create('tinymce.plugins.a2m_landingpages', {
        // creates control instances based on the control's id.
        // our button's id is "mygallery_button"
        createControl : function(id, controlManager) {
            if (id == 'a2m_landingpages_button') {
                // creates the button
                var button = controlManager.createButton('a2m_landingpages_button', {
                    title : 'A2ML Landindpage', // title of the button
                    image : '../wp-includes/images/smilies/icon_mrgreen.gif',  // path to the button's image
                    onclick : function() {
                        // triggers the thickbox
                        var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
                        W = W - 80;
                        H = H - 84;
                        tb_show( 'A2M Landingpage Content', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=a2ml-form' );
                    }
                });
                return button;
            }
            return null;
        }
    });

    // registers the plugin. DON'T MISS THIS STEP!!!
    tinymce.PluginManager.add('a2m_landingpages', tinymce.plugins.a2m_landingpages);

    // executes this when the DOM is ready
    jQuery(function(){
        // creates a form to be displayed everytime the button is clicked
        // you should achieve this using AJAX instead of direct html code like this
        var form = jQuery('<div id="a2ml-form">\
                                <div class="a2ml-form-wrapper">\
                                    <div class="a2ml-form-selector a2ml-form-landingpage">Landingpage Quiz</div>\
                                    <div class="a2ml-form-selector">AR Quiz</div>\
                                <\div>\
                            </div>');

        var table = form.find('table');
        form.appendTo('body').hide();

        // handles the click event of the submit button
        form.find('#a2m-submit').click(function(){
            // defines the options and their default values
            // again, this is not the most elegant way to do this
            // but well, this gets the job done nonetheless
            var shortcode = '<table><tr><td>';
            shortcode += table.find('#a2ml-question').val();
            shortcode += '</td></tr></table>';

            // inserts the shortcode into the active editor
            tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

            // closes Thickbox
            tb_remove();
        });
    });
})()

And the included a2m_functions.js looks like this:

jQuery(document).ready(function(){

    jQuery('.a2ml-form-wrapper').on('click', '.a2ml-form-selector', function() {
        alert("Yes");

    });
});

But when i click on the no alert appears. How does the JQuery selector work with a TinyMCE plugin in Wordpress?

Answer 1

What sharethis states is partially correct. $('.a2ml-form-wrapper') won't return anything, because the element is not there at the point of execution. But $(document).ready won't help here, because ready gets fired when the document is ready - not the editor. The tinymce editor usually takes a bit longer to be fully initialized.

What you need to do here is to assign the handler when the editor is ready. Here is the solution:

Add the following code right after createControl in your own plugin

createControl : function(id, controlManager) {
    ....
},
init : function(ed, url) {
    ed.onInit.add(function(ed) {
        jQuery('.a2ml-form-wrapper').on('click', '.a2ml-form-selector', function() {
            alert("Yes");
        });
    )};
},

Answer 2

I do not believe that your issue is specifically about TinyMCE.

The html element .a2ml-form-wrapper your are selecting in your script might not yet exist when your script is loaded. This is the case if either the TinyMCE script is loaded after your own one or if its html elements are added to the page with some delay.

If my assumption applies the solution is to either ensure your script to be loaded after TinyMCE or use .live() instead of the .on() to listen to the click. That would trigger your callback even if the clicked element was loaded after you script.

$(document).ready(function() {
    $('.a2ml-form-wrapper').live('click', function() {
        alert('Hello World');
    });
});

If this doesn't solve your problem, the whole TinyMCE html structure and script might be useful to know.