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

js动态添加div

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

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

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

    在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢?...原生JavaScript 原生JavaScript主要有2种实现方式,第一种是在动态添加的html代码中添加oclick事件,然后传递一个唯一的参数来判断点击的是哪个,然后做相应的操作。...第二种是通过事件委托的原理进行处理,事件委托将一个 事件监听器实际上绑定到整个容器,然后每个列表项被点击就可以访问,这样效率更高。...)">获取全部工作 div id="joblist"> div id="job1" class="job"> 删除 div> div> <script

    4K20

    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.7K20

    为已有点击事件的dom元素添加点击事件,并控制事件函数执行的顺序

    我们大家都知道,一个dom的事件流程是先经过事件捕获,然后到事件本身,最后是事件冒泡 事件捕获是从父级到子级 事件冒泡是从子级到父级 现在有个需求,页面有个按钮,本身已经有点击事件的处理逻辑了,内部逻辑我们也不知道...现在的需求是 我们需要在点击按钮后执行原有的业务逻辑之前,先执行另一个函数 我们可以使用事件捕获来进行操作 具体操作如下 我们使用事件代理加事件捕获的方式,来实现 div...id="parent" style="width: 200px;height: 200px;border: 1px solid #ddd;"> div id="child" style...="width: 50px;height: 50px;border: 1px solid #ddd;" onclick="nativeClick()">div> div>

    2.4K10

    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

    13510
    领券