Question

这与其他几个问题非常相似：

Jquery adding event listeners to dynamically added elements

Add Event Listener for dynamically created particular element using jquery

但是，我无法通过Google日历页面上的用户脚本来解决此问题，而且我一点也不清楚为什么不这样做。

具体来说，我想在eb-data中添加一个（悬停）监听器，它位于以下层次结构中：

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

在页面加载时，所有内容都存在于bubblecontent中，并且隐藏了bubble。单击某些其他元素时，将创建/填充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

所以我没有想法。我哪里错了？

编辑：请注意，这些只是＆＃34; popups＆＃34;的元素。当您点击Google日历中的活动时显示 - 如果您有Google帐户，则可以在控制台中自行测试代码。

Answer 1

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

如何在Google日历页面上为动态添加的元素添加事件处理程序？

1 个答案: