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

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

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

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

    JQuery——动态添加元素导致点击事件失效

    前言 因为博皮当前版本有人反馈文章中标题导航点击无法生成; jquery-click-invalid: https://codesandbox.io/s/jquery-click-invalid-forked-xpt352...内容 一开始我以为是svg导致的点击事件失效,但是看来下代码结构,发现两者并不关联; 开始觉得问题应该出现在.html()方法上,因为文章这块在博皮上是没做什么调整的,所以直接看博客园的blog-common.min.js...; 通过显示目录导航关键字进行搜索,就发现了关键之处,JQuery动态的添加元素,导致事先绑定的click事件失效了,因为.click只适用于静态元素; ?...> 既然问题找到了,那修复起来就很快了; 因为我们无法改变blog-commom.min.js,所以通过改变自己博皮代码进行修复; 原来代码 通过.html()进行组合,这样导致button对应的click...事件失效; /** * 设置文章标题-iconfont */ (() => { let titleInfo = $('#cnblogs_post_body

    12810

    vue 点击事件获取当前元素

    在开发中我们可能会使用单击事件去获取当前元素,这样就需要进行传参: 关键词: $event  在括号中输入这个关键词,然后在方法中就可以使用以下的方法去获取你当前所需要使用的元素 //当前点击元素...e.target //是你绑定事件元素 e.currentTarget //获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML...//获得点击元素的第一个子元素 e.currentTarget.firstElementChild //获得点击元素的下一个元素 e.currentTarget.nextElementSibling...//获得点击元素中idstring的元素 e.currentTarget.getElementById("string") //获得点击元素的string属性 e.currentTarget.getAttributeNode...('string') //获得点击元素的父级元素 e.currentTarget.parentElement //获得点击元素的前一个元素的第一个子元素的HTML值 e.currentTarget.previousElementSibling.firstElementChild.innerHTML

    1.8K10

    原生js添加元素

    今天做页面使用的mui,因为使用mui情况下无法使用jquery,于是在ajax请求完毕添加元素的时候发现自己竟然对原生js添加元素的方法有点模糊了,真是越活越倒退了,赶紧整理一波。...首先最简单的innerHTML,这个不想多说,入门新手喜欢这么用,但他的缺点也很明显:不管你渲染部分还是全部,始终需要替换原先所有的子元素,也就是需要重复渲染,会增加浏览器压力。...接下来就是正题了,js推荐是这样进行元素添加: 1.创建游离元素节点:let div=document.createElement(“div”); 2.给创建元素添加属性:div.setAttribute...(“class”,”className”);注意setAttribute一次只能设置一条属性 3.创建文本节点:let textNode=document.createTextNode(“需要添加的文本...”); 4.将文本节点添加元素节点中div.appendChild(textNode); 5.加元素节点插入文档:Parent.appendChild(div); over 发布者:全栈程序员栈长,转载请注明出处

    8.9K20

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

    所以一开始事件找不到“接头人”就没有执行。 扫噶,定位到问题,就好解决了。 之所以整理成随笔,是因为我之前没遇到过这个问题,听过事件委托机制,但是根本没研究过不知道适用于什么样的bug场景。...---------------非故事分割线------------------------------------------------------------------———————— jq写了点击事件...,是通过获取元素的类名被点击后执行对应方法,但是研发套完模板,他会把所有的结构先清空,导致jq根本找不到那个元素,所以事件就不得执行了。...正规点的说:JS异步加载,JQ事件不被执行解决方法(百度的标题,hah) jquery中动态新增的元素节点无法触发事件问题(同上) 解决方法: ? ?...但是缺点是:给一个元素添加多个事件委托机制时,他就挂了。  王者方法:on ? //模拟多个事件!

    4.9K50

    Android 实现为点击事件添加震动效果

    Android 点击Button 实现震动效果教程 Overview 在Android 的点击效果中,遇到震动效果的还是很多的。 接下来就让我们看一下如何实现震动效果。...封装我们的震动点击事件 首先,我们创建一个类,让他控制我们的点击震动效果。 我们创建一个名为ViewClickVibrate。...这样我们的点击效果算是全部完成了。 最后我们看一下如何实现他吧。.../ </LinearLayout 这样就实现了一个edittext控件的抖动效果,这里说明一下cycle_7.xml文件中android:cycles=”2″ 这一项是设置抖动的次数的,2抖动两次...以上这篇Android 实现为点击事件添加震动效果就是小编分享给大家的全部内容了,希望能给大家一个参考。

    2.2K20

    el-dropdown-item添加点击事件

    1、问题 Vue引入Element-ui框架,使用其DropDown组件时,发现官网教程并没有给出el-dropdown-item点击事件的使用方法。...因此需要自定义点击事件,也就是需要添加原生的点击事件。 2、添加点击事件 使用 @click.native=“”,此时就可以实现点击事件了。...3.1、native native修饰符用于处理DOM原生事件,在本文中由于组件 DropDown并没有封装点击事件,因此需要添加原生的点击事件,因此使用@click.native。...4、扩展@click的其他用法 @click.stop: 阻止事件冒泡 @click.prevent: 阻止事件的默认行为 (提交事件不再重载页面) @click.capture: 优先触发 @click.self...: 只有自己能触发,子元素无法触发 @click.once: 只能提交一次( .once 修饰符还能被用到自定义的组件事件上。)

    2.7K20
    领券