遇到的问题:动态生成的内容,事件绑定会出错。
例子: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终端记录神器

    我们在调试程序的时候,免不了要去抓一些 log ,然后进行分析.如果 log 量不是很大的话,那很简单,只需简单的复制粘贴就好.但是如果做一些压力测试,产生大量 log ,而且系统内存又比较小(比如嵌 ...

  2. SimpleCaptcha生成图片验证码内容为乱码

    转自:https://blog.csdn.net/wlwlwlwl015/article/details/51482065 前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作 ...

  3. PowerShell使用ServicePrincipal登陆Azure

    一.打开PowerShell 二.输入下列命令 $pass = ConvertTo-SecureString "<这里换成您的AAD应用密钥>" -AsPlainTex ...

  4. Ubuntu16.04上使用Anaconda3的Python3.6的pip安装UWSGI报错解决办法

    具体报错信息: lto1: fatal error: bytecode stream generated with LTO version 6.0 instead of the expected 4. ...

  5. PHP 通过带SSL的SMTP 发送邮件的处理

    客户端与SMTP服务器的通讯, 是通过固定的命令以及返回编号完成的. 发送Email, 需要经过的步骤有创建socket (区分带ssl, 还是不带ssl)执行命令, 并检查返回值是否与预期一致, 不 ...

  6. 用Docker启动php-5.6 fpm服务配合宿主机nginx运行php测试环境

    因为Ubuntu18.04默认的openssl版本就是1.1.0, 而PHP5.6无法在openssl 1.1下编译 "PHP 5.6 is receiving only security ...

  7. Java中使用FileputStream导致中文乱码问题的修改方案

    package com.pocketdigi; import java.io.File; import java.io.FileInputStream; import java.io.FileOutp ...

  8. 2.5 Apache Axis2 快速学习手册之JiBx 构建Web Service

    5. 使用JiBX生成服务(通过JIBX 命令将wsdl 生成 services ) 要使用JiBX数据绑定生成和部署服务,请执行以下步骤. 通过在Axis2_HOME / samples / qui ...

  9. 从NSTimer的失效性谈起(二):关于GCD Timer和libdispatch

    一.GCD Timer的创建和安放 尽管GCD Timer并不依赖于NSRunLoop,可是有没有可能在某种情况下,GCD Timer也失效了?就好比一開始我们也不知道NSTimer相应着一个runl ...

  10. Android截图命令screencap与视频录制命令screenrecord

    Android截图命令screencap 查看帮助命令 bixiaopeng@bixiaopeng ~$ adb shell screencap -v screencap: invalid optio ...