首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何实现动态添加元素添加点击事件

在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件情况,这种情况下一般需要给元素加上相关属性,然后写这些元素事件函数即可。动态添加元素怎么绑定事件呢?...原生JavaScript 原生JavaScript主要有2种实现方式,第一种是在动态添加html代码中添加oclick事件,然后传递一个唯一参数来判断点击是哪个,然后做相应操作。...第二种是通过事件委托原理进行处理,事件委托将一个 事件监听器实际上绑定到整个容器,然后每个列表项被点击就可以访问,这样效率更高。...该事件附加到staticAncestors应处理元素静态父级 ( )。 每次在此元素或后代元素之一上触发事件时,都会触发此 jQuery 处理程序。...,dosomething您会将事件绑定到已经存在父级(这是这里问题核心,您需要绑定到存在东西,不要绑定到动态内容),这可以(也是最简单选项)是document.

3.7K20
您找到你想要的搜索结果了吗?
是的
没有找到

JS实现动态获取当前点击事件id属性值

原本要实现功能如下: 点击下图播放按钮,要弹窗播放对应视频链接。...整个页面是通过ajax请求最新4部视频进行填充完成,视频列表又是通过template-web.js插件补上去,所以导致所有ID值都是一样,一开始给按钮添加一个事件,结果是所有播放按钮都是播放第一个视频...于是,想了好多办法,又把ID属性给弄成动态ajax请求属性值,实现了每个id不一样,接下来,因为点击播放要调用一个方法,进行解析视频播放,拼接成API+视频链接格式在新打开弹窗进行展示。...具体可以看下图: 要实现点击不同按钮,并且按钮ID是动态从ajax请求获取,还要添加点击视频拼接视频链接,参考了文章,可以获取点击按钮id值,然后使用button,将链接放在value中 Dom...对象id属性可以获取元素id值。

25.6K20

原生js怎么为动态生成标签添加各种事件

这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生js如何给动态生成标签添加事件?...因为这些标签都是后来通过ajax或者运行其他点击事件生成,那么如果之前给他们写事件他们这个dom对象是找不到,jq通过事件委托解决了这个问题,但是原生js这个问题该怎么解决呢?...我在网上查了很多资料,好像只有一种办法,那就是在生成标签并把标签添加到html结构中后再添加对于这个新标签各种事件,如果有更好方法,欢迎提出来。 <!...document.getElementById('a').appendChild(myp); alert(document.getElementsByTagName('p')[0]) myp.innerHTML = '我是新建<em>的</em>p...标签'; document.getElementsByTagName('p')[0].onclick = function(){ alert('我是p点击事件') } } <

7.9K50

js动态添加div

问题 有没有遇到过这样需求, 在页面上会有不定个input, 点击添加按钮就添加 ?...点击第一行添加 点击时候, 将div准备好, 添加到内容div中第一个 点击每行添加 将div添加到当前点击行后面一个 点击每行删除 删除当前div 实现 基本思路很简单, 只要在每个点击按钮上添加对应点击事件...我在封装时候喜欢先想用时候怎么用, 然后根据这个思路来想应该怎么封装, 思考如下 因为添加div肯定是不同, 是需要传参数, 但是如果直接传div字符串也太丑了, 应该在页面直接写HTML,...'); $(this).attr('name', name + '_' + secp); }); var _this = this; // 给添加按钮添加点击事件...cloneDiv.find('[add]').click(function () { _this.addAfterItem(cloneDiv); }); // 给删除按钮添加点击事件

24.3K40

Js - JQ事件委托( 适用于给动态生成脚本元素添加事件

最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表侧滑栏,在我这里用jq写交互事件。自测各方面都挺好,美滋滋给了研发。...---------------非故事分割线------------------------------------------------------------------———————— jq写了点击事件...,是通过获取元素类名被点击后执行对应方法,但是研发套完模板,他会把所有的结构先清空,导致jq根本找不到那个元素,所以事件就不得执行了。...正规点说:JS异步加载,JQ事件不被执行解决方法(百度标题,hah) jquery中动态新增元素节点无法触发事件问题(同上) 解决方法: ? ?...值得注意是:亲测此方法无效,可能是我用jq版本太高了,1.9多,已经不支持这个方法了 第二个方法: ? 但是缺点是:给一个元素添加多个事件委托机制时,他就挂了。  王者方法:on ?

4.8K50

前端JavaScript中动态事件添加

前言 在前端开发中,交互性是至关重要动态事件添加是一种在JavaScript中实现交互重要技术。本文将介绍动态事件添加概念和优势,并详细介绍两种常用动态事件添加方法。...事件基本概念 事件是指在网页中发生特定交互行为,比如点击按钮、滚动页面或输入文本等。通过事件,我们可以在特定交互行为发生时触发相关JavaScript代码,以实现相应操作和逻辑。...动态事件添加优势 动态事件添加具有以下优势: 灵活性: 可以根据特定条件或动态生成内容来添加事件,实现更加灵活交互效果。 可扩展性: 可以在任何时候添加或移除事件,方便进行功能扩展和调整。...通过addEventListener()方法动态添加事件 addEventListener()方法是DOM对象提供一种常用事件添加方式。...3.在父元素事件处理函数中,通过判断事件目标元素,确定要执行操作。 总结 动态事件添加是前端开发中实现交互性重要手段。通过动态事件添加,我们可以实现灵活、可扩展交互效果,减少重复代码编写。

17620

JS获取事件对象,获取事件对象(Firefox,IE)

做笔记,以防自己忘记~~ JS获取事件event,不同浏览器有不同做法。 例如IE下,在js函数中,通过window.event就可以获取,不必在函数中添加什么参数。...也可以用Prototype或者JQuery等,它们有他们对事件包装。还是使用JS库比较好,不然就有下边麻烦。...同时注意event 兼容性问题。  感觉这个挺好,可以捕获当前事件作用对象,如event.srcElement.tagName可以捕获活动标记名称。...在 ie中处理事件直接使用window.event对象即可,但在firefox中,是没有 window.event对象,函数需要使用事件时候,需要在事件发生时把事件作为参数传递给函数,不象在ie...中,事件对象是全局,随处都可以访 问.下面这个getEvent()函数可以兼容firefox和ie,只需要在访问事件对象函数开始调用getEvent()即可,不用再把事件作为 参数传递.以下代码已经实验通过

10K50

el-dropdown-item添加点击事件

1、问题 Vue引入Element-ui框架,使用其DropDown组件时,发现官网教程并没有给出el-dropdown-item点击事件使用方法。...因此需要自定义点击事件,也就是需要添加原生点击事件。 2、添加点击事件 使用 @click.native=“”,此时就可以实现点击事件了。...,而@实际上是 v-on 简写,而 v-on 则是对 vue 事件体系封装之后 API接口。...3.1、native native修饰符用于处理DOM原生事件,在本文中由于组件 DropDown并没有封装点击事件,因此需要添加原生点击事件,因此使用@click.native。...4、扩展@click其他用法 @click.stop: 阻止事件冒泡 @click.prevent: 阻止事件默认行为 (提交事件不再重载页面) @click.capture: 优先触发 @click.self

2.3K20
领券