如何使用jQuery正确监听Google Widget弹窗内选项的点击事件

你写的绑定代码不生效，核心原因是这个日历组件的下拉选项是动态生成后插入DOM的：普通的.click()事件绑定只会在代码执行时匹配页面上已经存在的元素，你写绑定逻辑的时候弹窗还没渲染，目标元素根本不存在，自然无法成功绑定事件。

使用jQuery的事件委托机制，将事件绑定到页面加载时就已经存在的固定父节点上，就可以监听到后续动态生成元素的点击行为，代码如下：

// 可将document替换为组件外层固定存在的父容器选择器，性能更优
$(document).on('click', '#addeventatc1-google, #addeventatc1-appleical', function () {
  // 获取目标元素文本
  const name = $('.speaker-name1').text().trim();
  console.log(name);
  // 其余业务逻辑可在此处编写
});

• 优先选择离目标元素最近的、非动态生成的固定父节点作为事件委托的绑定对象，不要都绑在document上，避免不必要的性能消耗
• 绑定前可先在浏览器元素检查面板确认Google、Apple选项的id、class属性是否和选择器匹配，避免因选择器写错导致事件不触发
• 如果需要区分点击的是Apple还是Google选项，可以在回调里通过$(this).attr('id')或者$(this).text()判断

内容的提问来源于stack exchange，提问作者Muhammad Irshad