遇到的问题:动态生成的内容,事件绑定会出错。
例子: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. iOS开发-NSUndoManager撤销(undo)和重做(redo)

    程序开发中我们经常会用到的两个快捷键Ctrl+Z和Ctrl+C,撤销和复制,Cocoa开发也可以实现这两个操作,为我们提供非常简单的操作类NSUndoManger,也可以称之为撤销管理器,NSUndo ...

  2. WPF获取当前用户控件的父级窗体

    方式一.通过当前控件名获取父级窗体 Window targetWindow = Window.GetWindow(button); 方式二.通过当前控件获取父级窗体 Window parentWind ...

  3. 【ZH奶酪】如何用Python实现编辑距离?

    1. 什么是编辑距离? 编辑距离(Edit Distance),又称Levenshtein距离,是指两个字串之间,由一个转成另一个所需的最少编辑操作次数.许可的编辑操作包括将一个字符替换成另一个字符, ...

  4. Tomcat 七 HTTP 连接器

    摘要 本文尝试翻译Tomcat官方文档Apache Tomcat 7连接器,不足之处敬请指正.该文先介绍了Tomcat7 HTTP连接器的属性,包括:公共属性.标准实现.Java TCP套接字属性.B ...

  5. loadrunner上传文件到网盘

    有人提问,loadrunner 上传文件搞不好,请求帮忙处理.让提供网址,用fiddler抓包上传部分,主要有3个请求 第一个请求GET https://yun.xxx.com/api/files/u ...

  6. linux source code search

    https://elixir.bootlin.com/linux/latest/source/fs/eventpoll.c#L1120

  7. 用Python来玩微信跳一跳

    微信2017年12月28日发布了新版本,在小程序里面有一个跳一跳小游戏,试着点一点玩了下.第二天刚好在一篇技术公众号中,看到有大神用Python代码计算出按压时间,向手机发送android adb命令 ...

  8. 【iCore1S 双核心板_ARM】例程十五:USB_HID实验——双向数据传输

    实验方法: 1.USB_HID协议免驱动,此例程不需要驱. 2.将跳线冒跳至USB_OTG,通过Micro USB 线将iCore1S USB-OTG接口与电脑相连. 3.打开上位机软件usb_hid ...

  9. 不平衡学习 Learning from Imbalanced Data

    问题: ICC警情数据分类不均,30+分类,最多的分类数据数量1w+条,只有10个类别数量超过1k,大部分分类数量少于100条. 解决办法: 下采样:通过非监督学习,找出每个分类中的异常点,减少数据. ...

  10. vue事件处理器

    1.监听事件 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. 示例: <div id="example-1"> <button ...