在动态创建的元素上添加事件监听器[重复]

2024-05-19

是否可以向所有动态生成的元素添加事件侦听器(Javascript)? 我不是页面的所有者,因此我无法以静态方式添加侦听器。

对于页面加载时创建的所有元素,我使用:

doc.body.addEventListener('click', function(e){
//my code
},true);

当页面上出现新元素时,我需要一个方法来调用此代码,但我无法使用 jQuery(delegate、on 等无法在我的项目中工作)。我怎样才能做到这一点?


听起来您需要追求委托策略,而不需要退回到图书馆。我在此处的 Fiddle 中发布了一些示例代码:http://jsfiddle.net/founddrama/ggMUn/ http://jsfiddle.net/founddrama/ggMUn/

它的要点是使用target on the eventobject 来查找您感兴趣的元素,并做出相应的响应。就像是:

document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // do your action on your 'li' or whatever it is you're listening for
  }
});

CAVEATS!示例 Fiddle 仅包含符合标准的浏览器的代码(即 IE9+,以及几乎所有其他浏览器的每个版本)如果您需要支持“旧 IE”attachEvent,那么您还需要围绕正确的本机函数提供您自己的自定义包装器。 (关于这个问题有很多很好的讨论;我喜欢 Nicholas Zakas 在他的书中提供的解决方案面向 Web 开发人员的专业 JavaScript.)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在动态创建的元素上添加事件监听器[重复] 的相关文章

  • zone.js:140未捕获类型错误:无法读取属性“删除”

    我是 kendo ui 的新手 我在小提琴中开发了原型 删除确认窗口在那里工作正常 但是当我集成到我的代码库中时 我收到错误 Cannot read property remove at the line pai to delete rem
  • 为什么 useReducer 调度会导致重新渲染?

    假设我实现一个简单的全局加载状态 如下所示 hooks useLoading js import React createContext useContext useReducer from react const Context crea
  • 网络上的等角柱状图

    我计划为游戏的标记 图钉 构建在线地图 但我无法设置标记的正确纬度 原始地图是一个2048 2048px 的正方形 然后我得到了标记 数千个 地图坐标使用 0 到 100 之间的 x y 表示法设置 0 0 是top left角和100 1
  • 用更好的模式替换开关(Javascript)

    我必须升级我的应用程序以根据用户类型和角色属性显示页面 目前 我使用一个简单的 switch 语句来根据用户类型来执行此操作 例如 switch type case a return CONSTANT ONE case b return C
  • ASP.NET 验证控件和 Javascript 确认框

    我有一个使用 NET 服务器端输入验证控件的页面 此页面还有一个 javascript 确认框 在提交表单时会触发该确认框 当前 当选择 提交 按钮时 会出现 javascript 确认框 一旦确认 就会触发 ASP NET 服务器端验证控
  • 无需重定向的 HTML 页面提交

    有没有什么方法可以在不使用ajax的情况下提交html表单而无需从当前页面重定向 你可以设置一个target 为您form 这样您就可以将表单提交到新选项卡 target blank 或一个小的 隐藏的iframe target nameo
  • 替换img路径jquery

    我正在尝试替换 jquery 中的 img 路径 注入远程页面 replaceexample com thumbs withexample com images 我已经尝试过这个 但似乎不起作用 img attr src replace t
  • 如何在单击按钮时清除反应挂钩中的间隔

    我正在用反应钩子构建一个简单的计时器 我有两个按钮启动和重置 当我单击开始按钮时 handleStart 函数工作正常 计时器启动 但我不知道如何在单击重置按钮时重置计时器 这是我的代码 const App gt const timer s
  • 为什么这个递归函数返回未定义?

    我正在尝试编写一个使用递归组合两个字符串的函数 我的代码如下 但我不知道为什么该函数返回未定义 特别是当我在基本情况下使用 console log 时 它不会打印未定义而是打印正确的值 var str3 function merge str
  • 使用 eval 时不会受到 XSS 威胁

    我正在制作 不是现在 但我仍然对这个感到好奇 一款使用 HTML5 和 JS 的游戏 我想要的是人们可以插入自定义脚本 但要安全 function executeCustomJS code eval code bad 当然这段代码非常糟糕
  • 为什么浏览器允许onmousedown JS改变href?

    我很长时间以来都注意到 当您尝试复制链接位置或在 Facebook 上打开链接时 它会修改链接并将其传递给l php 例如 我可以被发送到 http www facebook com l php u http 3A 2F 2Fwww goo
  • JS:修改 JS 对象中的值/对

    我正在尝试找出修改对象的最佳方法 而无需三次写出类似的对象 所以我有这三个对象 var object1 start start end end type 1 var object2 start start end end type 2 va
  • 为什么 console.log() polyfill 不使用 Function.apply()?

    我一直在看一些流行的console log 包装 填充 保罗 爱尔兰的 http paulirish com 2009 log a lightweight wrapper for consolelog 本阿尔曼的 http benalman
  • JavaScript setTimeout 和更改系统时间会导致问题

    我注意到如果我设置setTimeout未来1分钟 然后将我的系统时间更改为过去5分钟 setTimeout功能将在 6 分钟后触发 我这样做是因为我想看看夏令时系统时钟更改期间会发生什么 我的 JavaScript 网页使用setTimeo
  • Firebase 身份验证和实时应用程序数据库如何保护自身安全?

    从一般开发的角度来看 我很好奇如何保护在线资源的访问 我们使用以下 Firebase 配置参数初始化 Web 应用程序 apikey authdomain projectid databaseurl messagesenderid 服务器如
  • 如何计算一行中Flexbox项目的数量?

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据
  • YouTube 点击时禁用 HTML5

    有没有办法让我们通过javascript禁用HTML5视频的 播放 暂停 点击全屏 功能 然后在我们再次需要时将其放回去 我不知道你是否可以禁用它们 但你可以使用 css 删除它们 video webkit media controls f
  • 如何强制下载图片?

    我的页面上有一个动态生成的图像 如下所示 img src 我不想告诉我的用户右键单击图像并点击保存 而是想公开一个下载链接 单击该链接将提示下载图像 如何实现这一目标 最初我在 js 中尝试这样做 var path my image att
  • 在引导程序中以编程方式更改选项卡窗格选项卡

    我使用的选项卡窗格定义为 ul class nav nav tabs li a href personal Personal Information a li li class active a href contact Contact a
  • jQuery appendTo(), json 在 IE 6,7,8 中不起作用

    我这两天绞尽脑汁想找到解决办法 我使用 jQuery ajax 从数据库中获取值 以便在另一个框发生更改时更新一个框 php 脚本从数据库中获取值 然后输出 json 它在 FF 中工作正常 但在所有版本的 IE 中 选择框都不会更新 我已

随机推荐