0

This is very similar to several other questions:

Jquery adding event listeners to dynamically added elements

Add Event Listener for dynamically created particular element using jquery

And there is a working example here: http://jsfiddle.net/DBkV3/

However, I can't get this to work, from a user script on a Google Calendar page, and it's not at all clear to me why not.

Specifically, I want to add a (hover) listener to eb-data, which is in this hierarchy:

body > calmaster > bubble > bubblemain > bubblecontent > eb-root > eb-data

At page load, everything down to bubblecontent exists, and bubble is hidden. When certain other elements are clicked, eb-data is created/populated.

I am trying to add a hover listener to eb-data, both in a userscript, and in the console. I have tried many different things, for example (tried all these in the console):

$('.bubblecontent').on('hover', '.eb-root', function(e) {console.log('hover');})
$('.bubblemain').on('hover', '.eb-root', function(e) {console.log('hover');})
$('.bubble').on('hover', '.eb-root', function(e) {console.log('hover');})
$('body').on('hover', '.eb-root', function(e) {console.log('hover');})
$('.bubblecontent').on('hover', '.eb-main', function(e) {console.log('hover');})
...
$('body').on('hover', '*', function(e) {console.log('hover');})

etc.

None of these generate console output or errors. A different approach:

eb=$('.eb-data');
eb.hover(function(e) {console.log('hover');}

This produces the following:

Uncaught TypeError: eb.hover is not a function

And it gives the error location as inside one of the pre-existing js files - I don't understand what's happening here.

Then: 

$('.eb-data').hover(function(e) {console.log('hover');})

This does nothing, unless a .eb-data element is present on the page, in which case it works as expected. Great, but I need a user script to be able to do this. It seems like I might be able to add a click handler that waits for this element to appear, then adds a hover handler to that - but I imagine there is a better way.

I also tried:

$('.bubblecontent').on('hover', '.eb-data', function(e) {console.log('hover');})

This does not appear to add a hover listener, although it does produce output at the console - an array containing just the bubblecontent element. This prompted me to try to index the array:

$('.bubblecontent')[0].on('hover', '.eb-data', function(e) {console.log('hover');})

But this just gives me a similar error to before:

Uncaught TypeError: $(...)[0].on is not a function

So I'm out of ideas. Where am I going wrong?

edit: Note that these are just the elements of the "popups" that appear when you click on an event in Google Calendar - if you have a Google account, you can test code yourself in the console.

Community
  • 1
  • 1
monguin
  • 374
  • 4
  • 13

1 Answers1

0
$(document).on('hover',".eb-main",function(e){
Lucky Chingi
  • 2,248
  • 1
  • 10
  • 15
  • Thanks - after executing this in the console (with console.log('hover') in the function body), no console output is produced by hovering over the element. This is true whether it is executed while the element exists, or doesn't. – monguin Nov 07 '15 at 03:58
  • this will hold true only when the element exists in the document – Lucky Chingi Nov 07 '15 at 04:11
  • "this will hold true only..." this seems to be incorrect, see: http://jsfiddle.net/DBkV3/ (still works after changing all IDs to classes). I don't understand why it works in that example but not on the gcal page. – monguin Nov 07 '15 at 04:21