遇到的问题:动态生成的内容,事件绑定会出错。
例子:http://snowinmay.net/jqm/dom-learn2.html
1.绑定事件对动态生成的新元素无效。

问题描述:
bind事件绑定后只对dom中存在的元素有效,但是很多时候我们会对dom元素进行添加,后添加进来的元素bind事件是监测不到的。
解决方法:

  • 在每一个动态生成的地方都在次绑定一下事件
  • 把bind改用live,因为live是实时监测的
  • 把bind改用delegate,因为delegate是实时监测的
  • 在jq1.9版本后好像没有了live,改用了on
2.绑定事件多次执行。

问题描述:
绑定事件的时候,初始化的时候绑定一次,生成新的元素后又绑定一次,这样会造成事件执行多次。
解决方法:

  • 在绑定前先解绑事件:unbind().bind()
  • 先判断哪些元素是新添加的,哪些元素是初始化加载的,然后分别来处理
涉及到的知识点:
    • dom元素操作
    • 动态生成的元素事件绑定的处理(bind,on,live,delegate)
    • appendto和append的用法

dom元素操作(动态事件绑定)的更多相关文章

  1. jQuery_02之元素操作及事件绑定

    1.操作元素之属性: ①attr读:$("selector").attr("属性名"):=>getAttribute("属性名"):改 ...

  2. jQuery之元素操作及事件绑定

    1.操作元素之属性: ①attr读:("selector").attr("属性名"):=>getAttribute("属性名"):改: ...

  3. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  4. jQuery插件 -- 动态事件绑定插件jquery.livequery.js

    http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调 ...

  5. [HTML5]原生事件绑定和jquery动态事件绑定的区别

    原生事件绑定: <!-- 标签上绑定的事件是由window对象帮助调用,因此方法内的this其实是window对象 --> <label><input type=&quo ...

  6. jquery 动态事件绑定(0512)

    jquery动态事件绑定,父元素需为静态元素,(不能是动态生成): $("#parent").on("click","#child",fun ...

  7. 深度解析JQuery Dom元素操作技巧

    深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...

  8. event.target 属性返回哪个 DOM 元素触发了事件。

    <ul> <li>list <strong>item 1</strong></li> <li><span>list ...

  9. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

随机推荐

  1. WHY数学表达式的3D可视化

    WHY数学表达式的3D可视化 很早之前我就有这种想法,将数学表达式的图形显示出来.最近终于实现了这套较为完善的版本,将其代码公布,也为开源做点贡献.首先系统中定义一套脚本语言格式,用于描述数学表达式. ...

  2. C# CRC16 和汉明重量

    最近在看redis之类的pdf,发现redis在做集群的时候,不同的key分到不同的主服务器,其中划分key的算法采用CRC16算法,所以特此整理一下其C#code如下: #region CRC16 ...

  3. Mac下安装Mysql以及修改Mysql密码

    1.安装Mysql 安装有2种办法,一种是下载mysql安装文件,慢慢安装,另一种就是下载xmpp,里面自带mysql,就像是安装普通的mac软件一样,安装完毕,就有了mysql了. 方法一,官网下载 ...

  4. stingray中使用angularjs

    引入angularjs 手动启用angularjs 不使用ng-app, 在所有模块和controller定义后挂载启用angularjs function OnLoad() { scroll(0, ...

  5. Java字节码 小结

    Reference javap 基本使用方法 深入理解java字节码 从Java代码到字节码 Java字节码.class文件案例分析 字节码 核心概念 Class文件是8位字节流,按字节对齐.之所以称 ...

  6. asp.net core 2.1 post 无法提交参数?

    起 ,是微软二逼升级了.....不是说好了合并Controller 了吗?又倒回去了.................

  7. gcc/g++ disable warnings in particular include files

    当在编译一个大项目的时候,你想打开所有的Warning,但是打开后发现一堆公共库文件都出现了warning报错.此时如果你想忽略公共库头文件中的warning报错,只需要在编译的时候,将公共库头文件的 ...

  8. ios开发版证书与企业证书相关文件申请安装及其使用方法

    本文主要讲述以下内容: ios开发版证书的申请, 企业证书的申请, appid的创建, provision profile的生成, 开发设备devices的绑定, 以及每个证书文件之间的关系, 最后使 ...

  9. struts2 + urlrewrite 整合注意事项

    这几天业余时间在玩百度云,百度的云还是不错的,但是对于我这样的.NET程序员,有点不公平,没有.net虚机,不过也不是百度一家没有,基本都没有,有的都是那种开放云,自已在云端来部署安装软件的. 所以也 ...

  10. T-Pot平台cowrie蜜罐暴力破解探测及实现自动化邮件告警

    前言:Cowrie是基于kippo更改的中交互ssh蜜罐, 可以对暴力攻击账号密码等记录,并提供伪造的文件系统环境记录黑客操作行为, 并保存通过wget/curl下载的文件以及通过SFTP.SCP上传 ...