[英]How can I add event handlers to dynamically added elements on a Google Calendar page?
This is very similar to several other questions: 这与其他几个问题非常相似:
Jquery adding event listeners to dynamically added elements jQuery将事件侦听器添加到动态添加的元素
Add Event Listener for dynamically created particular element using jquery 使用jquery为动态创建的特定元素添加事件监听器
And there is a working example here: http://jsfiddle.net/DBkV3/ 这里有一个有效的示例: 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. 但是,我无法通过Google日历页面上的用户脚本来执行此操作,我也不知道为什么不这样做。
Specifically, I want to add a (hover) listener to eb-data, which is in this hierarchy: 具体来说,我想在eb-data中添加一个(悬停的)侦听器,它在此层次结构中:
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.
单击某些其他元素时,将创建/填充eb-data。
I am trying to add a hover listener to eb-data, both in a userscript, and in the console. 我正在尝试在用户脚本和控制台中向eb-data添加一个悬停侦听器。 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. 而且它提供了错误位置,就像先前存在的js文件之一一样-我不明白这里发生了什么。
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. 除非页面上存在.eb-data元素, 否则它不会执行任何操作,在这种情况下,它会按预期工作。 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. 尽管它确实会在控制台上产生输出-似乎仅包含bubblecontent元素的数组,但它似乎并未添加悬停侦听器。 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. 编辑:请注意,这些只是当您单击Google日历中的事件时出现的“弹出窗口”的元素-如果您拥有Google帐户,则可以在控制台中自己测试代码。
$(document).on('hover',".eb-main",function(e){
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.