• 关于 jQuery delegate , undelegate


    没啥好说的,看代码吧 !

    jQuery 版本 : 1.71

    浏览器版本:chrome 21

     1 <body>
     2 
     3     <ul class="a-list">
     4         <li><a href="javascript:;">test1</a></li>
     5         <li><a href="javascript:;">test2</a></li>
     6         <li><a href="javascript:;">test3</a></li>
     7         <li><a href="javascript:;">test4</a></li>
     8         <li><a href="javascript:;">test5</a></li>
     9     </ul>
    10 
    11     <ul class="button-list">
    12         <li><button>test1</button></li>
    13         <li><button>test2</button></li>
    14         <li><button>test3</button></li>
    15         <li><button>test4</button></li>
    16         <li><button>test5</button></li>
    17     </ul>
    18 
    19 </body>
    1 //绑定
    2 $(document).delegate('a', 'click', function()
    3 {
    4     alert($(this).html());
    5 });
    1 //不能取消
    2 $(document).undelegate('a');
    3 
    4 //可以取消
    5 $(document).undelegate('a', 'click');
    1 //绑定
    2 $(document).delegate('a, button', 'click', function()
    3 {
    4     alert($(this).html());
    5 });
    1 //不能取消
    2 $(document).undelegate('a', 'click');
    3 
    4 //不能取消
    5 $(document).undelegate('button', 'click');
    6 
    7 //可以取消
    8 $(document).undelegate('a, button', 'click');

    注意:

    1 //不能取消 (与绑定时选择器内容不一致,顺序颠倒)
    2 $(document).undelegate('button, a', 'click');
    3 
    4 //不能取消 (与绑定时选择器内容不一致,少了一个空格)
    5 $(document).undelegate('a,button', 'click');
    1 //绑定
    2 $(document).delegate('a, button', 'click mouseover', function(e)
    3 {
    4     alert($(this).html());
    5 });
     1 //略过部分测试,同上
     2 
     3 //不能取消
     4 $(document).undelegate('a', 'mouseover');
     5 
     6 //可以取消
     7 $(document).undelegate('a, button', 'click');
     8 
     9 //可以取消
    10 $(document).undelegate('a, button', 'mouseover');
    11 
    12 //可以取消
    13 $(document).undelegate('a, button', 'mouseover click');
    1 //绑定
    2 $('.a-list').delegate('a', 'click mouseover', function()
    3 {
    4     alert($(this).html());
    5 });
     1 //略过部分测试,同上
     2     
     3 //不能取消
     4 $(document).undelegate('a', 'click');
     5 
     6 //可以取消
     7 $('.a-list').undelegate('a', 'click');
     8 
     9 //可以取消
    10 $('ul').undelegate('a', 'click');
    11 
    12 //可以取消
    13 $('ul').undelegate();
    14 
    15 //可以取消
    16 $('.a-list').undelegate();
  • 相关阅读:
    前端数据可视化插件(二)图谱
    前端数据可视化插件(一)图表
    CSS性能优化
    HTML性能优化
    github前端资源
    javascript生成n至m的随机整数
    原生js获取元素样式
    模式二之框架模式
    kendo-ui的使用和开发自己的组件
    pycharm安装报错Non-zero exit co?
  • 原文地址:https://www.cnblogs.com/twoer/p/2704335.html
Copyright © 2020-2023  润新知