JQuery 应该针对 TinyMCE 插件中的类

Question

我为Wordpress编写了一个插件来增强TinyMCE的功能。我通过以下代码将 js 文件包含到管理面板中:

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');
}

TinyMCE 插件如下所示:

// 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();
        });
    });
})()

包含的 a2m_functions.js 如下所示:

jQuery(document).ready(function(){

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

    });
});

但是当我点击时没有出现警报。 JQuery 选择器如何与 Wordpress 中的 TinyMCE 插件配合使用？

Answer 1

我不认为您的问题专门与 TinyMCE 有关。

加载脚本时，您在脚本中选择的 html 元素 .a2ml-form-wrapper 可能尚不存在。如果 TinyMCE 脚本在您自己的脚本之后加载，或者其 html 元素添加到页面时有一些延迟，就会出现这种情况。

如果我的假设适用，解决方案是确保您的脚本在 TinyMCE 之后加载或使用 .live()而不是 .on() 来监听点击。即使在编写脚本后加载了单击的元素，这也会触发您的回调。

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

如果这不能解决您的问题，了解整个 TinyMCE html 结构和脚本可能会有用。