• jquery 委托事件处理函数后,当DOM树变化后,绑定的事件会失效


    最近做列表js排序时出现一个问题,当点击排序后,列表中的一些ajax失效。

    测试后发现,当点击后无法进入事件处理函数。后写了一个简单页面测试,重新布局页面元素后,相应的js也无反应。后直接页面元素绑定函数解决。

    在新加元素的时候可以使用.live方法,

    事件委托

    .live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤:

    1. 生成一个click事件传递给 <div> 来处理
    2. 由于没有事件处理函数直接绑定在 <div> 上,所以事件冒泡到DOM树上
    3. 事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。
    4. 执行由 .live() 绑定的特殊的 click 事件处理函数。
    5. 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
    6. 如果找到了匹配的元素,那么调用原始的事件处理函数。
  • 相关阅读:
    vue /deep/ ::v-deep >>> 深度选择器
    雪碧图优缺点
    自适应高度文本框 react contenteditable
    textarea 高度自适应
    UMI.js开发知识总结
    flex布局下img图片变形的解决方法
    umi model 注册
    HEVC标准介绍
    《推荐系统》阅读笔记
    互联网名词诙谐解释
  • 原文地址:https://www.cnblogs.com/yanmiao/p/3124915.html
Copyright © 2020-2023  润新知