js中事件绑定,$("body").on("click")与$("").click()区别

最新推荐文章于 2021-11-29 07:35:16 发布
最新推荐文章于 2021-11-29 07:35:16 发布
阅读量2.6k 收藏 1
点赞数 1
分类专栏： 笔记
本文介绍了在jQuery中如何为动态生成的元素绑定事件处理程序。element.click不适用于动态元素，推荐使用on方法。文章还强调了on方法前的元素必须在DOM加载时存在。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

element.click这种写法不支持给动态元素或者样式重新绑定事件。

支持给动态元素和属性绑定事件的是live和on，其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on，使用on的时候也要注意，on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，可以放在on的第二个参数里面。

vue.js click点击事件获取当前元素对象的操作
10-14
在这个过程中，Vue.js提供了`$event`对象，它包含了与事件相关的各种信息，如事件类型、目标元素等。本文将详细介绍如何在Vue.js中利用`click`事件获取当前元素对象。 首先，让我们来看一个基本的例子： ```html ...
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
11-25
在jQuery中，`on()`方法是用来绑定事件处理函数的，特别是在处理动态添加到DOM中的元素时，`on()`显得尤为重要。然而，在某些情况下，如果使用不当，可能会导致事件无法正常触发，就像标题中提到的问题：“jQuery on...
$body.on(‘click‘,‘button‘,function() {中.on在这里是什么意思的
firstcode666的博客
11-29 3213
$body.on('click','button',function() {中.on在这里是什么意思的 on表示将事件绑定在body上，第一个参数click表示点击事件绑定到body对象，第二个表示冒泡到button则触发，第三个是触发的函数
苹果手机$('body').on('click',selector,function(){})点击无效的问题
onepiece1991的博客
02-14 1681
简介： 刚做一个手机端的评价页面，点击事件是用的 $("body").on("click",selector,function(){ //通过body给子元素selector来绑定点击事件是为了防止子元素还没加载出来使点击事件无效 }) 星级评价可以点击，但是下面的标签选择就出现了问题，Android没问题，iOS死活点不了； js代码绑定方式都是一样的，html层级也没有问题，对比cs...
jquery 获取页面点击事件 $("body").click()
热门推荐
huaishuming的专栏
01-05 5万+
需求：当某个按钮触发click事件，那么显示 某个DIV 代码 $("#button1").click(function(){ $("#div1").show(); }); 再次点击则隐藏： 所以以上代码不要了 换成  $("#button1").click(function(){ $("#div1").toggle(); }); 定义和用法
html+body+on+键盘事件,JavaScript事件类型：键盘事件与焦点事件
weixin_34416354的博客
06-05 437
键盘事件用户在使用键盘时会触发键盘事件。1、keydown事件和keyup事件keydown：当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件。Keyup：当用户释放键盘上的键时触发。event对象属性在发生keydown和keyup事件时，event对象的keyCode属性中会包含一个代码，与键盘上的一个特定的键对应。Dom和IE的event对象都支持keyCode属性。例子：...
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
首先，我们来了解一下Vue.js中事件监听和触发的基本概念。在Vue.js中，$on方法用于在当前实例上监听一个自定义事件。当这个事件被触发时，附加在这个事件上的处理函数会被执行。与之对应，$emit方法是让子组件通过...
jquery单选框radio绑定click事件实现方法
10-24
总结来说，jQuery中的click事件绑定对于处理用户交互至关重要，特别是在单选框这种需要用户做出选择的场景中。结合选择器和事件处理函数，我们可以轻松地实现动态响应，提高用户体验。在实际开发中，要灵活运用...
Nuxt.js 数据双向绑定的实现
10-17
在了解Nuxt.js中数据双向绑定的实现之前，首先需要理解什么是数据双向绑定。数据双向绑定是前端开发中的一种概念，当数据模型发生变化时，视图会自动更新；当用户在视图界面上作出操作时，数据模型也会相应地进行...
jQuery如何给body绑定事件？
weixin_30553065的博客
07-10 672
jQuery如何给body绑定事件？ 代码如下： $(document).bind("resize", function () { alert("php-note.com"); }); 转载于:https://www.cnblogs.com/52php/p/5658309.html
jquery on_jQuery $（'body'）。on（）与$（'document'）。on（）
05-06 319
jquery on 用新的jQuery函数.on（）替换.live（），我已经看到了几种使用它的方法。 在这里，我看一下在事件委托中使用主体或文档作为绑定元素之间的主要区别。 如果您是事件委托的新成员，则它提供了将事件附加到尚未创建的元素的方法，并且在将事件附加到相同类型的多个元素时开销也较低。 有关更多信息，以及如果您不知道为什么不推荐使用.live（）的话，请查看jQuery .live（）与...
jQuery $（'body'）。on（）与$（'document'）。on（）
05-06 748
随着新的jQuery功能。对（）代替.live（）我已经看到了几种不同的方式来使用它。 下面我就来看看用肢体或文档作为事件委托绑定元素之间的主要区别。 如果你的新事件委托它提供附加的事件尚未与附加事件的相同类型的多个元素时也具有较低的开销创建的元素的手段。 欲了解更多信息，如果您想知道为什么.live（）不好已过时看看jQuery的.live（）VS。对（）审核 。 大多数浏览器事件气泡，或繁...
body click js 委托_谈谈 JavaScript 中的事件委托
weixin_36099503的博客
01-26 286
为什么要进行事件委托？首先实现一个小功能：在单击 HTML 的按钮后，把消息输出到控制台。为了实现这个小功能，你需要选择按钮，然后再用 addEventListener() 方法来附加事件监听器：Click medocument.getElementById('buttonId').addEventListener('click', () => console.log('Clicked!')...
jquery选择器中的逗号$(".bar",body).on("click",function(){})
rainbow8300的博客
09-17 1499
jquery选择器之$(“.bar”,body).on(“click”,function(){}) 在之前用jquery选择器时，清一色的都使用的("#id/.class/div").即便是选择器里加逗号，那也是在引号内加逗号("#id/.class/div").即便是选择器里加逗号，那也是在引号内加逗号("#id/.class/div").即便是选择器里加逗号，那也是在引号内加逗号(“ul.l
IOS上给body绑定click事件的bug
call_me_hoyin
03-27 680
window，document，body 绑定click事件是，点击body不会触发，只在IOS上有，包括ihone，ipad，由于ios浏览器都用的safari内核，所以ios浏览器全部中枪
IOS设备上给body绑定click事件不生效及其解决办法
inyiyi的博客
12-17 536
最近身边的同事不止一个碰到这样的问题： 在ios上对body绑定click事实现事件代理冒泡至某些元素上尽然不生效。 代码类似这样的 $('body').on('click','[data-tip]',function(e){ console.log($(this.).attr('data-tip')) }) 解决办法： 1.将click事件换成touch事件，同时还可以...
JS点击body效果
zuo520yang的博客
04-15 3113
jQuery(document).ready(function($) { $(“body”).click(function(e) { var a = new Array(“路见不平一声吼，吼完继续往前走。”, “咸鱼翻身，还是咸鱼。”, “水能载舟，亦能煮粥！”, “明月几时有，抬头自己瞅。”, “天哪！我的衣服又瘦了。”, “听君一席话，回家烤白薯。”, “流氓不可怕，就怕流氓有文化。”, “知...
this.$refs.table.$el.querySelector('div.el-table__body-wrapper').scrollTop = beforeScrollTop
最新发布
03-19
### Vue.js 中通过 `$refs` 设置 `el-table` 表格滚动位置 在 Vue.js 开发中，当需要操作 DOM 或者组件内部的状态时，可以通过 `$refs` 来访问子组件或原生 DOM 节点。对于 Element Plus 提供的 `<el-table>` 组件来说，设置其滚动条的位置是一个常见的需求。 #### 方法实现 以下是基于 Vue 3 和 Element Plus 的解决方案： 1. **绑定 `ref` 属性** 需要在模板中的 `<el-table>` 上绑定 `ref` 属性以便后续能够通过 `$refs` 进行访问。 2. **调用 `setScrollTop` 方法** 如果目标是将表格滚动到顶部，则可以直接调用 `scrollBarRef.setScrollTop(0)`[^1]。需要注意的是，此方法依赖于组件内部的具体实现逻辑，因此可能因版本不同而有所变化。 3. **处理异步渲染问题** 当使用条件渲染指令（如 `v-if`）控制表格显示隐藏时，可能会遇到无法立即获取到 `$refs.table` 的情况。这是由于 Vue 的响应式机制决定的——DOM 更新存在延迟。此时应借助 `$nextTick()` 确保 DOM 已经完成更新后再执行相关操作[^3]。 下面是完整的代码示例： ```javascript <template> <div> <!-- 绑定 ref --> <el-table v-if="flag" ref="elTableRef"> ... </el-table> <button @click="handleScrollToTop">滚动至顶部</button> </div> </template> <script> export default { data() { return { flag: true, }; }, methods: { handleScrollToTop() { this.$nextTick(() => { const tableInstance = this.$refs.elTableRef; if (tableInstance && tableInstance.$refs.scrollBarRef) { // 调用 setScrollTop 方法使表格回到顶部 tableInstance.$refs.scrollBarRef.setScrollTop(0); } }); }, }, }; </script> ``` 上述代码片段展示了如何安全地利用 `$refs` 对象来操控 `<el-table>` 实现滚动回顶功能，并妥善解决了潜在的同步/异步问题。 --- #### 注意事项 - 若未正确初始化或者销毁阶段尝试访问不存在的 `$refs` 成员变量会抛出错误，请务必确认对应元素已被挂载至页面上再做进一步动作。 - 不同框架版本间 API 可能略有差异，请参照官方文档核实具体细节[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值