zoukankan      html  css  js  c++  java
  • jquery中on绑定事件

    之前项目中动态创建的标签元素  在绑定事件的时候  都是无效  无论如何都不能触发

    eg:在页面加载完成之后   再由脚本动态创建的<div>元素  在绑定事件的时候 例如click事件 

    $("div").click(function(alert("aaa")){});

    那么动态创建的元素是触发不了这个事件的

    这是就要用到on来绑定事件了。

    但是在W3C中并没有on事件  只有live,delegate 这是由于这里的更新很不及时  ,建议去http://www.runoob.com(菜鸟教程)学习,但是个人感觉 菜鸟上的小错误比较多。

    on的定义和用法:

    on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

    自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

    注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。但是on事件是1.7之后新增加的  如果引用的是1.9之前的版本  还可以用live和delegate来绑定事件.

    live事件在1.9之后被移除了。

    自己尝试了一下   使用1.7之后的 给未来元素添加事件 使用on并不能触发。(放在下一篇进行解答)

    提示:如需移除事件处理程序,请使用 off() 方法。所有off也是1.9之后出现的。

    提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。

    另外附加下:click,bind(“click”),live,delegate的区别:

    1、click()与bind()

      1).click()

        在jqeury事件处理API中,bind()是其API基础。click(),mouseover(),mousermove等来处理事件,真正起作用的是bind()。而这些方法都只是辅助作用(别名函数),简化使用。他们都只有一个参数(触发事件时执行的回调函数).

      2).bind()

        bind()能更好的控制事件处理函数中的处理过程,且它可以一次绑定多个事件(事件名作为第一个参数,多个事件用空格分开,eg:bind('click contains',function(){})  鼠标左右点击事件 )

    所有实用bind()或者click(),mouserover()绑定的事件都可以使用unbind()方法解除绑定

    2、live()

      与bind()作用基本一样。

      最重要区别:live()可以将事件绑定到当前和将来的元素(eg:为id=zy元素绑定点击事件,而当你用js动态生成一个节点并插入到dom文档结构中时,如果你是用bind()绑定的,怎么新插入的节点将不会有该bind绑定事件。而live()则可以);

      缺点: 无法用于链式结构。

          eg:  $('.class').live('click',function(){  })     正确写法

             $('.class').find('span').live('click',function(){  })   错误写法  无效

      live()绑定的事件可用 die()方法解除绑定。

    3、delegate()

      与live()作用基本一样,但是解决live缺点。它通过将选择器内的上下文作为第一个参数来解决live问题(也就是delegate得第一个参数你可以当作是一个选择元素所用)。

      eg. $('.class').delegate('span','mouseover',fucntion(){  })    为class为class的元素下的所有span标签绑定mouseover事件。

      通过delegate()绑定的事件可通过undelegate()方法解除处理函数的绑定。

    PS:bind,delegate,live都可以绑定多个事件,多个事件效果一样:

    $("div").bind("click mouseout", function() {
         $("#aa").after("<span>aaa </sapn>")
     });

    触发不同效果:

    $("div").bind({
           click:function(){alert(1)},
           mouseout:function(){alert(2)}
    });
  • 相关阅读:
    爬虫笔记之JS检测浏览器开发者工具是否打开
    上海租房@8群
    在Windows中玩转Docker Toolbox(镜像加速)
    Docker 清理命令 删除所有的镜像和容器
    修改docker安装的machine位置
    Sass @mixin 与 @include
    webpack之SourceMap
    c#中Indexof()和Split()的用法
    《MVC+EF》——用DBFirst创建ADO.NET实体数据模型和对象关系映射
    sql server 用户'sa'登录失败(错误18456)
  • 原文地址:https://www.cnblogs.com/huangshuqiang/p/6201579.html
Copyright © 2011-2022 走看看