[英]How can I add event handlers to dynamically added elements on a Google Calendar page?
这与其他几个问题非常相似:
这里有一个有效的示例: http : //jsfiddle.net/DBkV3/
但是,我无法通过Google日历页面上的用户脚本来执行此操作,我也不知道为什么不这样做。
具体来说,我想在eb-data中添加一个(悬停的)侦听器,它在此层次结构中:
body > calmaster > bubble > bubblemain > bubblecontent > eb-root > eb-data
在页面加载时,存在所有气泡内容,并且气泡被隐藏。 单击某些其他元素时,将创建/填充eb-data。
我正在尝试在用户脚本和控制台中向eb-data添加一个悬停侦听器。 例如,我尝试了许多不同的操作(在控制台中尝试了所有这些操作):
$('.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');})
等等
这些都不产生控制台输出或错误。 另一种方法:
eb=$('.eb-data');
eb.hover(function(e) {console.log('hover');}
这将产生以下结果:
Uncaught TypeError: eb.hover is not a function
而且它提供了错误位置,就像先前存在的js文件之一一样-我不明白这里发生了什么。
然后:
$('.eb-data').hover(function(e) {console.log('hover');})
除非页面上存在.eb-data元素, 否则它不会执行任何操作,在这种情况下,它会按预期工作。 很好,但是我需要一个用户脚本才能执行此操作。 似乎我可以添加一个等待该元素出现的单击处理程序,然后向其添加一个悬停处理程序-但我认为有更好的方法。
我也尝试过:
$('.bubblecontent').on('hover', '.eb-data', function(e) {console.log('hover');})
尽管它确实会在控制台上产生输出-似乎仅包含bubblecontent元素的数组,但它似乎并未添加悬停侦听器。 这促使我尝试索引数组:
$('.bubblecontent')[0].on('hover', '.eb-data', function(e) {console.log('hover');})
但这给了我一个与以前类似的错误:
Uncaught TypeError: $(...)[0].on is not a function
所以我没主意了。 我要去哪里错了?
编辑:请注意,这些只是当您单击Google日历中的事件时出现的“弹出窗口”的元素-如果您拥有Google帐户,则可以在控制台中自己测试代码。
$(document).on('hover',".eb-main",function(e){
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.