Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >jQuery on绑定事件问题

jQuery on绑定事件问题

作者头像
sucl
发布于 2019-08-07 03:48:44
发布于 2019-08-07 03:48:44
2.5K00
代码可运行
举报
文章被收录于专栏:企业平台构建企业平台构建
运行总次数:0
代码可运行

直接上代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
//  $(".divv").on("click",'.p0',function(){
 //   alert("0000000.");
//  });
//  $(".divv").on("click",'.p1',function(){
 //   alert("11111111.");
//  });
	for(var i=0 ;i <2 ; i++){
		$(".divv").on("click",'.p'+i,function(){
		   alert(i);
	   });
	}	
});
	

</script>
</head>
<body>
<div class="divv">
  <p class="p0"  style="color:red">Click this paragraph11111.</p>
  <p class="p1" style="color:blue">Click this paragraph222222.</p>
</div>
</body>
</html>

以前没注意,最近在使用on绑定事件时发现,通过for循环绑定动态绑定时,多个元素最终绑定的都是最后一次事件,不知道用while是不是也是一样,谁有清楚这种现象也可以说一下原因!!!

解决方案:将for里面的绑定逻辑单独写一个函数即可。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JQuery各种点击事件的区别
在工作中,经常用到js的点击事件,有好多种表现形式,今天抽空总结一下它们的区别与联系。废话不多说,开始写测试案例。首先声明,本人水平有限,如果有错误之处,还请指正。
用户6182664
2019/09/05
2.9K0
前端之jQuery
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。
GH
2019/12/16
4.9K0
jquery
维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。
suwanbin
2019/09/26
5.8K0
jQuery 简介
https://www.runoob.com/jquery/jquery-syntax.html
zhangjiqun
2024/12/17
780
jQuery 简介
jQuery基础--事件处理
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
eadela
2019/09/29
2.5K0
jQuery开发补充笔记
[TOC] 0x00 前言简介 什么JQuery? jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架
全栈工程师修炼指南
2022/09/29
1.6K0
jQuery开发补充笔记
jQuery
jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript 编程。它的宗旨就是:Write less,do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,J
新人小试
2018/04/12
4.7K0
jQuery :contains 选择器
经常与其他元素/选择器一起使用,来选择指定的组中包含指定文本的元素(如下面的例子)。
王小婷
2021/07/08
6540
复选框checkbox提交数据类型和方法
对应的渲染方法如下: jQuery数据结构渲染(4):复选框checkbox赋值 https://www.jianshu.com/p/3878ff8c76d9
王小婷
2020/05/26
1.4K0
复选框checkbox提交数据类型和方法
JQuery 获取选中多选框的value,合并成字符串传给后台
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>JQuery 获取选中多选框的value,合并成字符串传给后台</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/
王小婷
2021/01/13
5900
jQuery基础
一 jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。 [2]   jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! [3]  它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 [4]  jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdo
用户1214487
2018/01/24
2.1K0
jQuery
    2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
changxin7
2022/05/06
9K0
jQuery
jQuery开发补充笔记
[TOC] 0x00 前言简介 什么JQuery? jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架
全栈工程师修炼指南
2020/10/23
4.7K0
jQuery开发补充笔记
jQuery 选择器使用方法
下面的代码,只有外层段落的字体会改变颜色,里层不会,因为里层是属于 divInner 的直系元素
Remember_Ray
2020/03/08
4.7K0
前端学习之jQuery
[1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
超蛋lhy
2018/08/31
3.2K0
jquery jQuery快速入门
维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。
IT人一直在路上
2019/09/18
16.3K0
04 . 前端之JQuery
JQuery简介 # 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 # 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便
iginkgo18
2020/09/27
3.4K0
jQuery基础
使用jQuery时, $ 是访问jQuery的标志,但是如果有其他方法与jQuery中的 $冲突时,可以释放$的使用权 ,还可以自定义一个符号来代替 $使用。
不愿意做鱼的小鲸鱼
2022/08/24
1.7K0
jQuery基础
JQuery 获取选中select下拉框的value和text的值,合并成数组传给后端
提交格式 "workFences": [ { "fenceId": "ew32w2wf232fwer23", "fenceName": "区域q" }, { "fenceId": "ew32w2wf232fw543r23", "fenceName": "区域b" } ], test.json {"msg":"查询成功","code":1,
王小婷
2022/03/29
2.7K0
JQuery 获取选中select下拉框的value和text的值,合并成数组传给后端
jQuery
DOM 对象 Alert 出来的效果是:[object HTML 标签名 Element]
OY
2022/03/12
10.8K0
jQuery
相关推荐
JQuery各种点击事件的区别
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验