今天笔者在实现一个简单的动态生成元素功能的时候,发现了一个问题:

使用append动态生成的元素事件绑定失效了。

查阅资料后发现: click(fn)当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而新添加的元素自然没有绑定到事件。

解决方案1:

单独为新添加的元素绑定事件,显然这样的操作存在代码冗余,不够简洁,这时我们可用看一看第二种解决方案。

解决方案2:

使用$(document).on('事件类型','要选择的元素',function(){})方法为元素绑定事件
   
 on方法包含很多事件,点击,双击等等事件。与click(fn)相比,二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 on() 能成功的绑定到动态控件中。

这样动态元素的事件绑定问题就可以解决了。

append动态生成的元素,无法触发事件的原因及解决方案的更多相关文章

  1. append()方法生成的元素绑定的事件失效解决办法

    我使用append()方法动态生成的a链接的click事件没有起效果,查找了资料,了解到,我使用的onclick方法绑定的事件对动态生成的元素是无效的,解决办法如下: 使用事件委托,并且要用on来绑定 ...

  2. js动态追加的元素如何触发事件

    一般通过js或者jQuery动态添加的元素标签,通过该元素标签.class.id触发事件,是无效的.如下所示: <body> <input type="text" ...

  3. JQ动态生成的元素,原事件绑定失效

    Old Code: $('code').click(function () { console.log($(this).text()); }); New Code:(.container 是<c ...

  4. Angular如何给动态生成的元素绑定事件

    在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...

  5. Jquery中动态生成的元素没有点击事件或者只有一次点击事件

    今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...

  6. jQuery对于动态生成的元素绑定无效的问题~~

    问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上, ...

  7. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  8. jquery给动态生成的元素绑定事件,on函数

    首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...

  9. jquery动态生成的元素添加事件的方法

    动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...

随机推荐

  1. 6353. 【NOIP2019模拟】给(ca)

    题目描述 题解 虫合 由于前几天被教♂育了,所以大力找了一发规律 先把m-1,设f[i][j]表示m≤i,有j个叶子节点的答案 转移显然,也显然是O(n^3)的 把f打出来后长这样: 1 1 1 1 ...

  2. ubuntu1804隐藏顶部工作栏

    先安装 sudo apt-get install gnome-shell-extension-autohidetopbar 然后安装 sudo apt-get install gnome-shell- ...

  3. B/S超大文件上传与下载

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

  4. Mybatis传多个参数(三种解决方案) mapper.xml的sql语句修改!

    第一种 Public User selectUser(String name,String area); 对应的Mapper.xml <select id="selectUser&qu ...

  5. 取得所有网卡的MAC地址,包括禁用的

    先在nuget包中添加System.Management.Automation引用. 然后下面就是代码了. using System;using System.Collections.ObjectMo ...

  6. React-Native 之 GD (五)属性声明和属性确认 及 占位图

    1.在 React-Native 创建的自定义组件是可以复用的,而开发过程中一个组件可能会由多个人同时开发或者多个人使用一个组件,为了让开发人员之间减少沟通成本,我们会对某些必要的属性进行属性声明,让 ...

  7. DAY 5 上午

    或者跑一个dp dp[i]表示总花费不超过i的情况下的最短路 dij套dp o(nk)个点 对于每一个点u,建立k+1个点表示到点u花费费用为i 比如u-->v长度为c u,0-->v,c ...

  8. 10.6 Comment Syntax

    w https://dev.mysql.com/doc/refman/5.7/en/comments.html MySQL 5.7 Reference Manual  /  Language Stru ...

  9. 《JavaScript DOM 编程艺术 第 2 版》

    第 5 章 最佳实践 平稳退化:现在基本所有带交互的网站都使用 Ajax,SAP 也火起来了,平稳退化真是很难实现了(看到第七章发现我之前的观点是错了) 分离 JS 向下兼容 性能考虑 第 6 章 案 ...

  10. VMware 虚拟化编程(10) — VMware 数据块修改跟踪技术 CBT

    目录 目录 前文列表 数据块修改跟踪技术 CBT 为虚拟机开启 CBT CBT 修改数据块偏移量获取函数 QueryChangedDiskAreas changeId 一个 QueryChangedD ...