CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Sjenkie
Sjenkie

Reputation: 237

Jquery 'mouseover' only before content is loaded

I have a function that should detect what you hover over only in a certain iframe. The code

$(document).ready(function(){
    editor();
});
function editor(){
    var iframe = document.getElementById("iframe")
    var doc = iframe.contentDocument || iframe.contentWindow.document;
    $(doc).on('mouseover',function(e){
      console.log("hey");
      //further code non-related
    });
}

It should fire when I move my mouse and I have my mouse over this certain iframe, but it only does it once when I load it and my mouse is in the iframe. Is there an update I am not aware of or? So, when I move my mouse over this iframe nothing happens, which is kind of upsetting and the problem.

The target

So, the initial goal is to have an iframe on a page and when I move my mouse over that iframe I want to be able to see what item in the iframe I'm hovering over. This is only when the mouse is in the iframe. I want to get that message when I'm hovering over the items in that iframe I suppose....

When it does work

It works, without content. As you can see here. Butttt... when content is loaded in, the whole operations shuts down and is not working anymore.

Upvotes: 0

Views: 107

Answers (1)

McKabue
McKabue

Reputation: 2232

Bind the event on the IFRAME DIRECTLY

function editor(){
    $("iframe").on('mouseover',function(e){
      alert("hey");
      //further code non-related
    });
}

editor();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe src="https://www.youtube.com/embed/NMBNZspmn7I">

</iframe>

Upvotes: 1

Related Questions