您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势,全网首家
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站还享受设计型网站同等级售后服务,这不是做梦!紫石头原创模板站,让这一切变为可能!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

免费咨询热线
0371-56789-390

click与on绑定的区别及用法
发表:紫石头原创模板堂    发表时间:2019-07-03 09:47:59    阅读:159

    之前遇到过一次.click()无效,改成on绑定click就好了的情况,看了几篇博客后,发现是自己对click()和on的理解不够,没太在意,最近又遇到了,所以写下这篇文章加深印象。

    $(选择器).click(fn):当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而.J_del这个删除按钮是通过append加到页面上的 。所以.click()无效
    .$(document).on('click','要选择的元素',function(){})
    on方法包含很多事件,点击,双击等等事件。和$().click()的用法一样,最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。即动态创建的元素也能触发事件

    另外这样写也不可以

    因为通过on或click绑定的事件只对当前存在的元素有效, 即on前面的元素必须在页面加载的时候就已经存在dom里,所以后添加的类名为.del的按钮无效

    可以像这样把事件绑定到.del的父元素上(事件委托),注意父元素必须是已经存在dom里,而不是后面动态添加的。
    $().on()的知识点补充:
    1.$().on()支持直接在目标元素上绑定事件,也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下,即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。
    此外,该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
    要删除通过on()绑定的事件,请使用off()函数。如果要附加一个事件,只执行一次,然后删除自己,请使用one()函数。
    该函数属于jQuery对象(实例)。
    2.从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。
    $().bind()直接绑定在元素上,和click,blur,mouseon一样的点击事件。
    $().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。
    $().delegate()是更精确的小范围的使用事件代理。
    $().on()结合了这三个方法的优势摒弃了劣势。
    3.该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
    4. 阻止事件冒泡和事件委托的方法:
    return false。
    在事件的处理中,可以阻止默认事件和冒泡事件。
    event.preventDefault()
    在事件的处理中,可以阻止默认事件但是允许冒泡事件的发生。
    event.stopPropagation().。
    在事件的处理中,可以阻止冒泡但是允许默认事件的发生。
模板推荐
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2020 永易搜旗下紫石头原创模板堂 All Rights Reserved 豫ICP备14011598号-7 营业执照