遇到的问题:动态生成的内容,事件绑定会出错。
例子: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. linux tomcat 绑定域名

    1.解析域名到对应的服务器ip 2.找到tomcat安装路径进入/conf 3.vi server.xml 4.修改<Connector port="8080" protoc ...

  2. 一篇文章让你学透Linux系统中的more命令

    Linux 下有很多实用工具可以让你在终端界面查看文本文件.其中一个就是 more. more 跟我之前另一篇文章里写到的工具 —— less 很相似.它们之间的主要不同点在于 more 只允许你向前 ...

  3. Spark2.3(三十四):Spark Structured Streaming之withWaterMark和windows窗口是否可以实现最近一小时统计

    WaterMark除了可以限定来迟数据范围,是否可以实现最近一小时统计? WaterMark目的用来限定参数计算数据的范围:比如当前计算数据内max timestamp是12::00,waterMar ...

  4. Python实现doc转化pdf

    Python实现doc转化pdf python源码实现doc转化pdf #-*- coding:utf-8 -*- # doc2pdf.py: python script to convert doc ...

  5. 002_ASP.NET 换主题

    网盘下载地址 http://pan.baidu.com/s/1c1VzIla 在线观看地址 http://www.bamn.cn/course/lesson/2 课程介绍 ASP.NET 实现更换主题 ...

  6. (转)超过 130 个你需要了解的 vim 命令

    从 1970 年开始,vi 和 vim 就成为了程序员最喜爱的文本编辑器之一.5 年前,我写了一个问自己名为 “每个程序员都应该知道的 100 个 vim 命令” 这次算是之前那篇文章的改进版,希望你 ...

  7. keras 文本分类 LSTM

    首先,对需要导入的库进行导入,读入数据后,用jieba来进行中文分词 # encoding: utf-8 #载入接下来分析用的库 import pandas as pd import numpy as ...

  8. 【经验分享】我经历的几门MOOC

    这半年来,从1月初到6月底,在coursera上注册了4们有关数据分析/挖掘的课程.这些课程都是利用业余时间学习,每周基本上花5个小时左右.其中通过了3门,注销了一门.感觉还是学到了一些东西. 第一门 ...

  9. 【Java】Java Queue的简介

    阻塞队列 阻塞队列有几个实现: ArrayBlockingQueue LinkedBlockingQueue PriorityBlockingQueue DelayQueue SynchronousQ ...

  10. ssh的tunnel隧道打洞

    分正向和反向. 假设,本地机器可以ssh连上远程机器.本地机器在下面叫做SSHClient, 远程机器叫做SSHServer. 一. 正向代理(本地转发) 在SSHClient机上执行: : SSHS ...