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結構和腳本可能會有用。

Answer 2

什麼共享狀態是部分正確的。 $('.a2ml-form-wrapper')不會返回任何內容，因爲執行時該元素不存在。但$(document).ready在這裏沒有幫助，因爲ready在文檔準備就緒時被觸發 - 而不是編輯器。 tinymce編輯器通常需要更長的時間才能完全初始化。

你需要做的是在編輯器準備就緒時分配處理程序。 這裏是解決方案：

添加createControl之後將下面的代碼在自己的插件

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"); 
     }); 
    )}; 
},