Javascript - 在DIV中选择H1

Question

I've searched all I can about this and found answers that are seemingly correct. But it doesn't work for me. I have this CKEditor inside a div. Inside this CKEditor, there are lots of content and I want to add a hover event on all H1 styles inside this editor.

The div structure looks like this:

<div id="content" class="cke_editable">
   <h1>
      <span>My content</span>
    </h1>
</div>

I'm trying to use qTip2 actually, since it seems to fit my needs. But I can't manage to select the H1 tag. Is it because it's inside a div which has both an ID and a class? Or does it have anything to do with the fact that there's a <span> tag inside the H1?

Here's the javascript:

<script type="text/javascript">
var shared = {
    position: {
        my: 'top left', 
        at: 'bottom right',
    },
    style: {
        tip: true
    }
};

$('h1').qtip( $.extend({}, shared, { 
    content: 'An example tooltip',
    style: {
        classes: 'ui-tooltip-red'
    }
}));
</script>

When it comes to the selector, I've tried selecting only H1, like in this example. As well as $('.cke_editable h1') , $('#content h1') and $('#content > h1') . But no dice. In my CSS, I've successfully added cursor: pointer to #content h1 . And that works.

Am I doing something wrong here?

Edit: If I select $('#content').qtip directly, it works btw.

Answer 1

Try to put it like this:

$('h1','#content').qtip

or:

$('#content').find('h1').qtip

Answer 2

CKEditor在它放置内容时创建一个iframe，因此您不能使用jQuery选择器来选择其中的元素，因为它甚至不再在同一个文档中。