Jquery:如何将事件绑定到具有兄弟元素的元素？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

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 操作,就能找到唯一的父级被绑定元素了.

5.5K1 0

jquery获取元素绑定的事件

一个简单的记录，在调试jquery的事件绑定时会用到。查看某元素是否绑定上了事件。...在JQuery1.8之前： obj=$('div.event');obj.data('events'); 在JQuery1.8中： objs=$('div.event');$...._data(objs[0],'events'); 参考： http://stackoverflow.com/questions/12214654/jquery-1-8-find-event-handlers

5.7K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

使用jQuery.data()查看元素上绑定的事件

最近遇到一个诡异的问题，发现我添加在一个HTMLElement片段上面的事件绑定，会在后续的流程中，无故丢失了。但是，我不知道它是什么时候丢失的。所以我需要要一步步逼近定位到问题。...最先想到的是浏览器面板上面的，可以选中元素，看元素上面的事件绑定。但浏览器上面看到的是结果量，也就是看到的是已经丢失了事件的元素，但我还是不知道什么时候丢失的。...我可以断点取到每个阶段的HTMLElement元素的状态，但是，这个时候，我却找不到观察其事件绑定情况的方法。谷歌好久，发现JS原生是没法查看事件绑定情况的。...还好，我们都是用的jQuery，用的$.on()。而jQuery自身事件绑定，额外添加了一层事件数组。...，就会返回这个元素上面绑定的所有事件。

2.8K0 0

JavaScript 技术篇-js代码触发dom元素绑定事件实例演示，jquery触发元素绑定事件方法

div.login-content > div.content-right > div > div > div.login-panel-input.login-submit-panel > button"); // 调用按钮事件进行点击...login_btn.click(); 可以看到效果图： jquery 通过 trigger() 方法触发点击事件。...div.content-right > div > div > div.login-panel-input.login-submit-panel > button").trigger("click") 使用前提是该 dom 元素必须绑定的事件才能出发...，他的祖先元素绑定的事件他触发不了，所以这里要把 Ancestors All 取消勾选一下。

10.7K1 0

从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件

2、方法二元素.width(属性值或者数字); 元素.height(属性值或者数字); 1、jQuery中用以上方式可以获取和设置元素的宽高。 2、当没有参数的时候是获取元素的宽高属性。...四、为元素绑定事件 1、方式一：（事件名）语法：元素.事件名(事件处理函数); 示例： // 绑定鼠标进入，离开，点击事件 $("#btn").mouseenter(function ()...4、方式四：（delegate方法）语法：（父元素替子元素绑定事件）父元素.delegate("子元素"，"事件名"，事件处理函数); 示例： // 为div下p标签绑定点击事件 $("#dv")....语法：父元素.on("事件名", "子元素", 事件处理函数); 示例： // 为div下p标签绑定点击事件 $("#dv").on("click", "p", function () { //....... }); PS：on 其实不仅可以给子元素绑定事件，还可以给自己绑定事件，这时候只需要把子元素的参数去掉就好了。

8724 0

JS和JQuery获取当前元素的兄弟及父级等元素的方法

) jQuery.parents(expr)，类似于 jQuery.parents(expr) ，但是是查找所有祖先元素，不限于父元素 jQuery.children(expr)，返回所有子节点，这个方法只会返回直接的孩子节点...这个方法和 children() 的区别就在于，包括空白文本，也会被作为一个 jQuery 对象返回， children() 则只会返回节点 jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点...jQuery.prevAll()，返回所有之前的兄弟节点 jQuery.next()，返回下一个兄弟节点，不是所有的兄弟节点 jQuery.nextAll()，返回所有之后的兄弟节点 jQuery.siblings...()，返回兄弟姐妹节点，不分前后 jQuery.find(expr)，跟 jQuery.filter(expr) 完全不一样： jQuery.filter()，是从初始的 jQuery 对象集合中筛选出一部分...; //获得s的最后一个子节点 JS获取节点父级，子级元素：JS的方法会比JQUERY麻烦很多，主要则是因为FF、谷歌浏览器会把你的换行也当作DOM元素：空的text元素，目前IE也是这样 <div

14.2K1 0

jQuery 隐藏具有指定class属性值的元素

antzone{ width:200px; height:100px; background:#ccc; } jquery.../1.9.0/jquery.js"> $(document).ready(function(){ $("#bt").click(function(){ $...antzone"> 点击按钮可以隐藏class属性值为"antzone"的元素

7.4K3 0

动态添加的html元素绑定事件的方法

避免先写了DOM操作，但是元素是动态加载的，所以点击不生效，比较好的方法有两个： 1、动态添加的时候加行内事件，比如onclick="funcName()" 在js中写好方法名对应的方法就可以了，如果绑定方法的元素太多...，可以考虑使用方法二； 2、jquery的on事件绑定 eg: on事件可以给动态添加的元素也绑定事件。...console.log("aaa") let num = $(this).parents(".input-group").index(); console.log(num) }) 注意：on事件先是获取到父元素...，然后绑定到子元素上，父元素最好是已经存在的元素，而不是动态添加的。

4.5K4 0

JQ动态生成的元素，原事件绑定失效

Code： $('code').click(function () { console.log($(this).text()); }); New Code：（.container 是所在的div...'.container').on("click", "code", function () { 　　console.log($(this).text()); }); 之前只是知道官方推荐使用on来生成事件...，并不知道其好处，这次知道了话说，，，真的好久没碰前端了，忘差不多了，O(∩_∩)O~ 动态加载JS 和 CSS 在线浏览PDF之PDF.JS （附demo）几个比较有意思的JS脚本经典JS

1.6K2 0

cssjshtml jquery向动态生成的元素添加事件

定义和用法 delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。...使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。...规定要附加事件处理程序的一个或多个子元素。 event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。 data 可选。规定传递到函数的额外数据。...规定当事件发生时运行的函数。 jquery-1.10.2.js"> Click me!

4.7K1 0

代码中执行绑定元素的指定事件trigger方法

前面业务里有个搜索功能 , 入口比较深 , 现在想要把入口挪到有公共header的地方 , 在不想完全实现一遍功能的情况下 , 就需要模拟进行多个点击事件来执行点击后的效果 ?...执行先点击1 ,再给inout赋值 ,再点击2 基本思路是类似jquery的trigger方法 , 原生js也是可以实现 , 代码如下按钮1 按钮2 // 假如想通过点击 Button-1 触发 Button-2 的某个事件 let btn_1 = document.getElementById.../1.10.2/jquery.min.js"> 按钮3 按钮4 //jquery的trigger方法 $( "#btn-3" ).click(function() { alert("按钮3"); $( "#btn-4" ).trigger( "click

1.3K2 0

jquery获取元素到页面顶部的距离

这时就会用到获取需要固定在页面位置的元素距离页面顶部的距离，通过比较文档滚动条到顶部的距离和页面元素到顶部距离的大小便可确定。...在jquery中有一个语句可以获取到元素到顶部的距离，语法为 $(selector).offset().top 下面看一个例子 luofanting.com.cn 那么 $("#footer_luofanting_com_cn").offset().top 就是元素到页面顶部的距离

6.4K2 0

从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件

，只会执行最后一个相同的绑定事件。...先说结论：通过调用事件名的方式和 bind 的方式只能绑定之前存在的元素，后添加的元素不能绑定事件；而 delegate 和 on 的方式绑定元素的方式可以。...三、解绑事件用什么方式绑定的事件，最好用什么方式解绑事件。...1、bind 解绑事件语法： // 解绑单个或多个事件绑定事件的元素.unbind("事件名1 事件名2 ..."); // 解绑所有的事件绑定事件的元素.unbind(); PS：unbind...也可以解绑元素.事件名(事件处理函数) 方式的绑定事件。

1K4 0

从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件

9302 0

vue封装jquery修改自身以及兄弟元素的方法「建议收藏」

在项目中我们经常有，点击某一个元素让其自身样式发生变化，同时其兄弟元素改变的需求，最简单的就是通过Jquery来操作，但是如果需求多的话，那么我们就可以对这个方法进行封装，然后再引入使用。...源码：我们在网页中打开https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js，复制代码粘贴到我们的项目文件中。...'@/common/jquery.js' //声明对象 let change={ //对象中的方法(name就是对应的class类名，index为当前点击元素的索引) go(name, index...) { // 获取当前点击的元素 let a = $(name)[index] $(a)[0].style.backgroundColor = "#4CD964" $(a)[0].style.color...= "#fff" // 设置同等级兄弟元素的样式 $($(a)[0]).siblings().css('background-color', "#fff") $($(a)[0]).siblings()

8192 0

JavaScript 技术篇-通过代码获取dom元素绑定的监听事件，chrome浏览器查看js元素绑定的监听事件

Array(1)} mousedown: [{…}] mouseout: [{…}] __proto__: Object getEventListeners() 方法可以获取到 dom 元素的监听...可以看到当前 dom 节点的监听就是 mousedown 和 mouseout。取消勾选 Ancestors All 可以排除当前元素所有祖先元素的监听。...反过来如果想通过代码获取某个元素所有祖先元素的监听可以遍历它的所有上级节点再依次获取所有 dom 节点的监听。

7.9K5 0

v-if绑定的元素为什么事件没有响应

Vue是一套构建用户界面的渐进式框架，入门也比较容易，但在使用过程中却可能会遇到这样那样的问题，今天笔者就将使用中遇到的一个问题记录于此，希望能帮到遇到类似问题的朋友。...="check"> $("#test").click(function(){ //todo }); 在html中使用v-if来控制该button的显示...，并在js代码中绑定该button的click事件，但是不幸的是如果载入时check变量为false，该button就会隐藏，即使后期check变为true而该button又显示出来，但是test按钮的...click事件却只有在页面加载的时候绑定(不幸的是该button没有在dom中形成而导致事件绑定失败)，所以click事件不会响应，所以使用v-if绑定的事件需要使用另外一种方式来绑定click事件：v-on

1.6K2 0

chrome 技巧篇-如何查看web元素绑定的监听事件

第二步：选中 Elements 页签内对应的元素，可以用一个按钮来试一试。第三步：右边选择 Event Listeners 页签，并取消勾选 Ancestors All。...这个包含该元素所有父类绑定的监听事件。如下图所示：图中的提示框的确定按钮就绑定了一个 click 点击事件。 ?

8.9K4 1

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

在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的，我们下面就为各位来详细的介绍此问题的解决办法．　　...其实最简单的方法就是直接在标签中写onclick=""，但是这样写其实是有点low的，最好的方式还是通过给类名绑定一个click事件。...解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法，如下：方法一：使用live 　　live()函数会给被选的元素绑定上一个或者多个事件处理程序，并且规定当这些事件发生时运行的函数。...通过live()函数适用于匹配选择器的当前及未来的元素。比如，通过脚本动态创建的元素。...实现如下： $('.liLabel').live('click', function(){ alert('OK'); }); 方法二：使用on 　　可以通过on方法绑定事件，可以绑定到它的父级或者

2.7K2 0

JQuery 获取元素到浏览器可视窗口边缘的距离

测试环境 JQuery-3.2.1.min.js 下载地址： https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js...需求场景实现需求：如下，获取tab标签页到页面底端的距离前提：tab标签元素自身不携带滚动条 3....--通过js获取 tab对应的页面内容--> <iframe name...JS代码实现 /** * 设置tab标签页对应的页面内容高度 */ function setTabPageContentHeight() { var contentContainer =...（如果页面刚加载完，这时还没打开tab页，会出现容器高度为0的情况 var offsetTop = contentContainer.offset().top; //容器距离document顶部的距离

3.2K2 0

点击加载更多

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

jquery获取元素绑定的事件

使用jQuery.data()查看元素上绑定的事件

JavaScript 技术篇-js代码触发dom元素绑定事件实例演示，jquery触发元素绑定事件方法

从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件

JS和JQuery获取当前元素的兄弟及父级等元素的方法

jQuery 隐藏具有指定class属性值的元素

动态添加的html元素绑定事件的方法

JQ动态生成的元素，原事件绑定失效

cssjshtml jquery向动态生成的元素添加事件

代码中执行绑定元素的指定事件trigger方法

jquery获取元素到页面顶部的距离

从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件

从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件

vue封装jquery修改自身以及兄弟元素的方法「建议收藏」

JavaScript 技术篇-通过代码获取dom元素绑定的监听事件，chrome浏览器查看js元素绑定的监听事件

v-if绑定的元素为什么事件没有响应

chrome 技巧篇-如何查看web元素绑定的监听事件

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

JQuery 获取元素到浏览器可视窗口边缘的距离

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐