Запуск jQuery против tinymce

Question

Я работаю в консоли хром и пытаюсь добавить туда какой-нибудь jQuery, чтобы управлять стилями времени выполнения объектов внутри редактора WordPress TinyMCE.

У меня есть DIV элемент внутри редактора с классом «my_box», и я пытаюсь манипулировать стиль выполнения с помощью 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 является независимым ДИВ оберточной редактор:

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