How can I add event handlers to dynamically added elements on a Google Calendar page?

Question

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.

Answer 1

$(document).on('hover',".eb-main",function(e){