遇到的问题:动态生成的内容,事件绑定会出错。
例子: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. [web前端] 去哪儿网前端架构师司徒正美:如何挑选适合的前端框架?

    原文地址: https://www.jianshu.com/p/6327d4280e3b 最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架. 每次新开业务线或启动新项目时,首先第一件事就是 ...

  2. centos安装EPEL repo

    What is EPEL EPEL (Extra Packages for Enterprise Linux) is open source and free community based repo ...

  3. SQL Server2012 配置管理器无法打开

    由于需要电脑上装了 SQLServer 2008 R2 和 SQLServer 2012 两个版本的数据库,两个库的实例名称不一样,之前一直用实例名连接对应的数据库,正常没有问题.现在用 “ip+端口 ...

  4. ionic tab显示到顶部去了

    添加配置调整显示位置 .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) { $ionicConfigP ...

  5. Oracle 12c中文乱码,修改字符集的方法

    在windows 7 64位上安装Oracle 12c没有设定字符集,采用的是操作系统默认字符集:WE8MSWIN1252,将字符集修改为:ZHS16GBK.由于过程不可逆,首先需要备份数据库. 1. ...

  6. 基于Centos7.5搭建Docker环境

    docker很火,基于容器化技术,实现一次编译到运行.实现运行环境+服务的一键式打包! 00.部署环境 centos7.5(基于vmware搭建的测试环境,可以跟互联网交互,桥接方式联网) docke ...

  7. 利用Xmanager Enterprise 5的passive显示远程linux主机图形化信息

    问题描述: 最初的需求是,安装oracle数据(第一次安装都是图形化linxu进去一步步操作,后续发现可以命令静默安装不调用图形化,学习就是步步入深,方得始终),最初实现window弹出linux主机 ...

  8. 在Android上启用Kiosk模式

    我们的云帆机器人(上面运行的安卓程序)有一个线下场景是商场,由于商场人多,总会遇到一些用户在我们的app里乱点,然后会跳出程序进入到系统设置的一些界面,这样很不友好. 比如程序中有一些需要输入文字的地 ...

  9. Nginx 介绍

    Nginx 是什么 Nginx ("engine x") 是一个开源的,支持高性能.高并发的 Web 服务和代理服务软件.它是由俄罗斯人 Igor Sysoev 开发的,最初被应用 ...

  10. 关于烦躁的网页编码问题utf-8,gb2312。终于自己实践了一遍

    俗话说实践是检验真理的唯一标准,的确如此. 自己一直比较懒,虽然觉得大牛应该一个记事本全部搞定,但自己还是喜欢用Dw或者Vs写好网页的架构,因为总觉得用notepad还要自己导入声明,而gVim还没有 ...