Element showing as null on page load

Question

I am trying to attach a hover function to a dynamic div ID that is being generated by a script (using Smooch api). The function doesn't work even when I run it in my console after everything has been loaded.

I tried doing:

$(document).on("mouseenter", "#messenger-button", function() {
    alert("hey")
});

and I keep getting this error: Uncaught TypeError: Cannot read property 'on' of undefined

The html that is being generated after the Smooch api is initiated looks like this:

<iframe>
 <html>
   <div id="messenger-button" style="background-color: rgb(10, 74, 119);>
 </html>
</iframe>

There is no function that is allowing me to add a class, change the css, or do anything to change the properties for the div in the generated iframe. Can anyone who has used Smooch api tell me how I can add a hover state to the messenger button that is generated?

Well sounds like you do not have jQuery. The $ in the console is not jQuery... $ is querySelector in chrome — epascarello, Nov 16 '17 at 01:38
Possible duplicate of [jQuery/JavaScript: accessing contents of an iframe](https://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe) — random_user_name, Nov 16 '17 at 01:43
Unless the iframe is from the same domain as your site, you cannot access the contents of the iframe that way. — random_user_name, Nov 16 '17 at 01:43
@epascarello I do have jQuery installed. I am able to user jQuery to attach a hover state to static divs I created. It just doesn't work for the dynamic content. — Neha Sohail, Nov 16 '17 at 01:56
@epascarello well it is. If I run `$("#messenger-button")` in my console I get this ` — Neha Sohail, Nov 16 '17 at 03:00
Which is NOT a jQuery object. The `$` is a short cut for `document.querySelector` like I mentioned an hour ago. And `$$()` is `document.querySelectorAll` — epascarello, Nov 16 '17 at 03:01
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference — epascarello, Nov 16 '17 at 03:03
@epascarello sorry, but I do have jQuery installed and I am using it...how do you suggest I test if I am running it or now? — Neha Sohail, Nov 17 '17 at 02:12
run `console.log($);` in the console and post what it returns. Than do `console.log(jQuery);` — epascarello, Nov 17 '17 at 02:14
@epascarello I get this `ƒ (a,b){return new n.fn.init(a,b)}` — Neha Sohail, Nov 17 '17 at 02:37
@NehaSohail given jquery is working is my answer not working for you ? — Kartik Prasad, Nov 20 '17 at 02:14

Kartik Prasad · Answer 1 · 2017-11-16T03:27:10.433

-1

You'll need to select the iframe and get its contents and change the elements from there, see.

$(document).ready(function(){
    var iFrameDOM = $("iframe").contents();

    iFrameDOM.find("#messenger-button").addClass("new-messenger");
});

edited Nov 16 '17 at 03:27

answered Nov 16 '17 at 00:49

Kartik Prasad

730
7
18

Element showing as null on page load

1 Answers1