針對tinymce運行jQuery

Question

我正在使用chrome控制檯，並嘗試在那裏添加一些jQuery，以便操作WordPress TinyMCE編輯器內的對象的運行時風格。

我有類「my_box」在編輯器中一個div元素，我想通過jQuery來操作運行時的風格，像這樣：

jQuery('#tinymce .my_box').hover(
    function(){ 
     jQuery(this).attr('style','border:3px dashed red') 
    } 
); 

然而，當我在控制檯運行這一點，DOM結果集爲空[]。如何將事件附加到tinymce編輯器中的對象，並且在測試它的作品後我應該在哪裏放置腳本？

Answer 1

當這個運行時，它會發現.my_box當時存在於包裝中的任何實例。如果他們當時不在那裏，或者#tinymce不是真正的包裝，而是產生了一些小瑕疵，那麼下面的選擇器什麼也找不到。

jQuery('#tinymce .my_box').hover(
    function(){ 
     jQuery(this).attr('style','border:3px dashed red') 
    } 
); 

考慮，而不是像這樣，在#tinymceWrap是一個獨立的div包裹編輯：

jQuery('#tinymceWrap').hover(
    function(){ 
     // use find here so jquery will search for `.my_box` instances again on each hover 
     jQuery(this).find('.my_box').css('border','3px dashed red'); 
    } 
);