首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery 查找on事件绑定元素的被绑定元素方法

jQuery 查找on事件绑定元素的被绑定元素方法 遇到的问题 今天写了一个JQ插件,结果里面有一点问题.让我很郁闷.问题演示代码如下 $box.on('click', 'img', function(...){ $(this) }); 如上代码,当我点击这个图片的时候 $(this) 是指 img ....当然这是正确的. 而我需要找到 $box 也就是 img 的父级. 如果不是插件的话,我当然可以根据它的ID或者CLASS来进行查询.问题是,我是写的插件,也就是说,我并不知道它的这些信息是什么....解决方法 很多基础的东西不理解,就会出现我这样的问题.如同事所说,你是还不会爬呢,都学上跑了.因此,踩坑无数啊....解决方法如下: $box.on('click', 'img', function(){ $box.has($(this)) }); 如上,通过 .has 操作,就能找到唯一的父级被绑定元素了.

4.5K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JQuery——动态添加元素导致点击事件失效

    前言 因为博皮当前版本有人反馈文章中标题导航点击无法生成; jquery-click-invalid: https://codesandbox.io/s/jquery-click-invalid-forked-xpt352...内容 一开始我以为是svg导致的点击事件失效,但是看来下代码结构,发现两者并不关联; 开始觉得问题应该出现在.html()方法上,因为文章这块在博皮上是没做什么调整的,所以直接看博客园的blog-common.min.js...; 通过显示目录导航关键字进行搜索,就发现了关键之处,JQuery动态的添加元素,导致事先绑定的click事件失效了,因为.click只适用于静态元素; ?...> 既然问题找到了,那修复起来就很快了; 因为我们无法改变blog-commom.min.js,所以通过改变自己博皮代码进行修复; 原来代码 通过.html()进行组合,这样导致button对应的click...事件失效; /** * 设置文章标题-iconfont */ (() => { let titleInfo = $('#cnblogs_post_body

    13510

    jQuery的事件模型

    前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型。 jQuery的事件系统离不开jQuery的缓存系统。...jQuery的第一代缓存是直接将数据存储在 缓存体 这个数据结构中,但是需要在元素上添加一个uuid来作为标示, 标记在缓存体中的位置。...所以jQuery第二代缓存系统应运而生,这次不对元素进行添加属性,而是判断元素的valueOf()方法的返回值,如果没有返回值是 对象,则说明缓存体中并没有该元素的缓存数据,进而使用ECMA5的Object.defineProperty...简单讲述了缓存系统,现在着重讲解下jQuery的事件系统: 主要使用了几个数据结构,即元素的缓存体,Event构造函数,和Handler构造函数。   ...最后将该handlerObj存入该元素对应的缓存体中, 并用addEvent绑定事件。   使用unbind移除回调也比较简单,无非是移除缓存,移除回调。

    95480

    Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件。自测各方面都挺好的,美滋滋的给了研发。...所以一开始事件找不到“接头人”就没有执行。 扫噶,定位到问题,就好解决了。 之所以整理成随笔,是因为我之前没遇到过这个问题,听过事件委托机制,但是根本没研究过不知道适用于什么样的bug场景。...,是通过获取元素的类名被点击后执行对应方法,但是研发套完模板,他会把所有的结构先清空,导致jq根本找不到那个元素,所以事件就不得执行了。...正规点的说:JS异步加载,JQ事件不被执行解决方法(百度的标题,hah) jquery中动态新增的元素节点无法触发事件问题(同上) 解决方法: ? ?...值得注意的是:亲测此方法无效,可能是我用的jq的版本太高了,1.9多,已经不支持这个方法了 第二个方法: ? 但是缺点是:给一个元素添加多个事件委托机制时,他就挂了。  王者方法:on ?

    4.9K50

    jQuery 之 元素节点操作滚轮事件与函数节流

    在现存元素的内部,从后面插入元素 var $span = $('这是一个span元素'); $('#div1').append($span); ......... 2、prepend()和prependTo():在现存元素的内部,从前面插入元素 3、after()和insertAfter():在现存元素的外部,从后面插入元素...4、before()和insertBefore():在现存元素的外部,从前面插入元素 删除节点 : $('#div1').remove(); todolist(计划列表)实例 滚轮事件与函数节流 jquery.mousewheel...插件使用 jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jquery的滚轮事件插件jquery.mousewheel.js。...函数节流 javascript中有些事件的触发频率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件,在短事件内多处触发执行绑定的函数

    1.3K60

    jquery的事件&动画

    一、事件 在1.7之前的版本中jQuery处理事件有多个方法, (google 搜索: jquery live bind degelate)作用各不相同,后来统一的使用on/off方法 1、.on( events...click", "click.name1", 或者 ".myname" 参数2selector:一个选择器字符串,用于过滤和选中能触发事件的后代元素 参数3data:当一个事件被触发时,要传递给事件处理函数的...最大的问题是,后面新增的元素没有绑定click显示值的事件,需要使用事件代理解决这个问题 $('.box li').on('click', function(){ var str = $(this)...所匹配元素的 绑定的事件类型对应的处理程序,个人理解是用代码触发本应该行动click触发的事件处理函数 $('#foo').on('click', function() { console.log...二、动画 1、.hide([duration ] [,easing ] [,complete ]) 用于隐藏元素,没有参数的时候等同于直接设置display属性=none 参数1:动画时长的毫秒数值(如

    1.8K20

    jQuery:详解jQuery中的事件(一)

    当文档或者它的某些元素发生某些变化或操作时,浏览器就会自动生成一个事件。当然使用传统的JavaScript也能完成这些交互,但是jQuery增加兵扩展了基本的事件处理机制。...).ready()方法注册的事件处理程序,在DOM完全就绪时就可以被调用,也即此时网页的所有元素对jQuery都是可以访问的,但是并不是这些元素关联的文件都已经下载完毕。   ...根据上述描述,显然使用jQuery的$(docum).ready()方法时会出现一个问题。由于在该方法内注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载晚。...要解决这个问题,可以使用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。...明天继续完成jQuery事件的下半部分,包括的内容有合成事件、事件冒泡、移除事件等内容。

    1.7K20

    jquery中动态新增的元素节点无法触发事件解决办法

    在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法.   ...),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效。   ...其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件。...解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下: 方法一:使用live   live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。...通过live()函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。

    1.7K20

    jquery操作元素的位置

    .offset()   在匹配的元素中,获取第一个元素的当前坐标,或设置每一个元素的坐标,坐标相对于文档。   .offset() 这个不接受任何参数。     ....offset(function(index,coords))     返回用于设置坐标的函数。     ...() 这个方法不接受任何参数.position() 可以获取得元素相对于父元素的偏移位置。...+ position.left + ", top: " + position.top ); .scrollLeft()   获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条的的距离...$("div.demo").scrollLeft(300); .scrollTop()   获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条的距离。

    3.4K60

    从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件

    一、操作元素的宽和高 1、方法一 元素.css("width"); 元素.css("height"); 最后得到的是字符串类型的,比如 200px。...2、方法二 元素.width(属性值或者数字); 元素.height(属性值或者数字); 1、jQuery中用以上方式可以获取和设置元素的宽高。 2、当没有参数的时候是获取元素的宽高属性。...() 元素.scroll(function() {}); // 元素卷曲事件,元素在向上或向左卷曲的时候触发的事件。...4、方式四:(delegate方法) 语法:(父元素替子元素绑定事件) 父元素.delegate("子元素","事件名",事件处理函数); 示例: // 为div下p标签绑定点击事件 $("#dv")....... }); PS:on 其实不仅可以给子元素绑定事件,还可以给自己绑定事件,这时候只需要把子元素的参数去掉就好了。

    59640
    领券