• $(document).on和$('.className').on区别


    0.绑定对象,动态

    $('document').on('click','.className',function() { });
    是把事件绑定到document上,页面每次有点击就会去判断是否动作相符;

    $('.className').on('click',function() { });
    是把事件绑定到元素上;

    $("className").on为onclick绑定,只有在页面onload的时候执行一次,当页面刷新后,
    新加载的具有className的元素便没有事件绑定到上面了,

    $(document).on这种方法会刷新和重新赋予绑定操作,所以一定程度上更为全面。

    1. $(选择器).click(fn)

    当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。

    2.$(document).on('click','要选择的元素',function(){})

    on方法包含很多事件,点击,双击等等事件。
    和$().click()的用法一样,
    最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。

    举个栗子

    fe05c16aca688b89a7f4a983788dff34.png

    在下面的html中,两个父筛选器都是可以的,

    <html>
       <div id="id_div_GenerateLink">
       	<button class="copy" type="button">复制</button>
       	<button class="copy" type="button">复制</button>
       </div>
    </html>
    
    //父筛选器.document
    $(document).on('click', '.copy', function () {
    	var that = $(this);
    	console.log(that);
    });
    
    //父筛选器.#id_div_GenerateLink
    $('#id_div_GenerateLink').on('click', '.copy', function () {
    	var that = $(this);
    	console.log(that);
    });
    
    

    扩展

    JQuery中on()和click()区别

    click()属于静态加载,当页面加载完,就不在为新增加的元素添加点击事件。

    on()属于动态加载,当页面加载完,可以为新增加的元素添加事件。但是必须选定负级元素。

    摘抄文档

  • 相关阅读:
    2017光棍节新生训练赛
    javascript模块化编程(二):AMD规范
    javascript模块化编程(一):模块的写法
    CommonJS Promises/A规范
    javascript面向对象(三):非构造函数的继承
    javascript面向对象(二):构造函数的继承
    javascript面向对象(一):封装
    this用法(ryf)
    javascript继承机制的设计思想(ryf)
    XMLHttpRequest对象用法
  • 原文地址:https://www.cnblogs.com/love-zf/p/14203509.html
Copyright © 2020-2023  润新知