zoukankan      html  css  js  c++  java
  • 事件处理(事件委托)

    事件处理(事件委托)
    $("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。

    // .on的selector参数是筛选出调用.on方法的dom元素的指定子元素,如:
    // $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
    // click事件;

    [selector]参数的好处:
    好处在于.on方法为动态添加的元素也能绑上指定事件;如:

    //$('ul li').on('click', function(){console.log('click');})的绑定方式和
    //$('ul li').bind('click', function(){console.log('click');})一样;我通过js给ul添加了一个
    //li:$('ul').append('<li>js new li<li>');这个新加的li是不会被绑上click事件的

    //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定,然后动态添加
    //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件

    [data]参数的调用:
    function myHandler(event) {
    alert(event.data.foo);
    }
    $("li").on("click", {foo: "bar"}, myHandler)

    总结:

      $('要绑定标签的上级标签').on('click','要绑定的标签',function())  

      #jquery 1版本要使用下面的方式

      $('要绑定标签的上级标签').delegate('要绑定的标签''click',function())  

  • 相关阅读:
    服务器出现大量的127.0.0.1:3306 TIME_WAIT连接 解决方法 [转载]
    phpize安装php扩展CURL
    linux位数查看
    Linux下Sublime Text 3的安装
    ECstore后台报表显示空白问题解决办法
    centos 上安装phpstorm
    Nginx禁止目录执行php文件权限
    vue 动画
    vue的路由
    组件的传值 组件之间的通讯
  • 原文地址:https://www.cnblogs.com/ajaxa/p/9364534.html
Copyright © 2011-2022 走看看