动态添加行 为元素解绑事件 delegate的解绑事件 off的解绑事件
2024-05-10 11:27:48
动态添加行
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {padding: 0;margin: 0;font-size: 14px;font-family: Century Gothic;}.wrap {width: 410px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 400px; }tr,td {/*width: 25%;*/height: 25px;}.btnAdd {width: 110px;height: 29px;font-size: 20px;font-weight: bold;margin-bottom: 20px;}.form_add_title span {width: auto;height: 18px;font-size: 20px;font-family: Century Gothic;font-weight: bold;color: rgb(102,102,102);text-indent: 12px;margin-right: 10px;display: block;text-align: center;padding: 8px 0px 10px;overflow: hidden;background-color: #F5F5F5;}.form_add {position: fixed;top: 29%;left: 50%;margin-left: -197px;padding-bottom: 20px;background-color: #fff;display: none;border: 1px solid #080;text-align: center;}.form_item > .txt {width: 299px;height: 32px;}.form_add_title div {width: 16px;height: 20px;position: absolute;right: 10px;top: 6px;font-size: 29px;line-height: 16px;cursor: pointer;}.form_submit input {margin-top: 20px;width: 169px;height: 32px;}</style><script src="jquery-1.8.3.js"></script><script>// 页面加载的事件$(function(){// 显示对话框$("#addData").click(function(){// 显示对话框$("#formAdd").show();// 显示遮挡层$("#j_mask").show();});function closeKuang(){ // 隐藏对话框$("#formAdd").hide();// 隐藏遮挡层$("#j_mask").hide();}// 点击x关闭对话框$("#j_hideFormAdd").click(function(){closeKuang();});// 添加数据的按钮$("#j_btnAdd").click(function(){// 先获取课程的文本框对象var j_txtLesson = $("#j_txtLesson");// 获取学院文本框的对象var j_txtBelSch = $("#j_txtBelSch");// 创建行和列并直接加入到tbody中$("<tr><td>"+j_txtLesson.val()+"</td><td>"+j_txtBelSch.val()+"</td><td><a href='javascript:;' class='get'>GET</a></td></tr>").appendTo($("#j_tbody"));// 关闭对话框closeKuang();// 清空课程的文本框j_txtLesson.val("");j_txtBelSch.val("前端与移动开发学院");});// 页面加载后就为a注册点击事件,使用的是on的方式$("#j_tbody").on("click",".get",function(){$(this).parent().parent().remove();});});</script>
</head>
<body>
<div class="wrap"><div><input type="button" value="添加数据" id="addData" class="btnAdd"></div><table border="1" cellpadding="0" cellspacing="0"><thead><th>课程名称</th><th>所属学院</th><th>已学会</th></thead><tbody id="j_tbody"><tr><td>JavaScript</td><td>前端与移动开发学院</td><td><a href="javascript:;" class="get">GET</a></td></tr><tr><td>jQuery</td><td>前端与移动开发学院</td><td><a href="javascript:;" class="get">GET</a></td></tr><tr><td>HTML5</td><td>前端与移动开发学院</td><td><a href="javascript:;" class="get">GET</a></td></tr><tr><td>CSS</td><td>前端与移动开发学院</td><td><a href="javascript:;" class="get">GET</a></td></tr></tbody></table>
</div>
<!-- 遮挡的div -->
<div id="j_mask" class="mask"></div>
<div id="formAdd" class="form_add"><div class="form_add_title"><span>添加数据</span><div id="j_hideFormAdd">x</div></div><div class="form_item"><label class="lb" for="j_txtLesson">课程名称:</label><input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称"></div> <div class="form_item"><label class="lb" for="j_txtBelSch">所属学院:</label><input class="txt" type="text" id="j_txtBelSch" value="前端与移动学院"></div><div class="form_submit"><input type="button" value="添加" id="j_btnAdd"></div>
</div></body>
</html>为元素解绑事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;background-color: green;cursor: pointer;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// 用什么方式绑定事件,最好用对应的方式解绑事件// unbind括号中写什么事件的名字就会把这个事件解绑,会把这个元素的// 这个点击的多个事件都会解绑// 对象.click()这种方式添加的事件也可以使用unbind解绑// 括号中没有任何参数,此时该元素的所有的事件全部解绑// 同时解绑多个事件----每个事件的名字中间用空格即可// 第一个按钮为div绑定事件$("#btn").click(function(){// div的点击事件$("#dv").bind("click",function(){console.log("div被点了");}).bind("click",function(){console.log("div点两次了");});// 鼠标进入$("#dv").bind("mouseenter",function(){$(this).css("backgroundColor","blue");});// 鼠标离开$("#dv").bind("mouseleave",function(){$(this).css("backgroundColor","pink");});});// $("#dv").click(function(){// console.log("哈哈");// });// 第二个按钮为div解绑事件$("#btn2").click(function(){// 解绑的是点击事件// 解绑的是点击事件,所有的点击事件全部移除// $("#dv").unbind("click");// 括号中没有任何参数,此时该元素的所有的事件全部解绑// $("#dv").unbind();// 同时解绑多个事件$("#dv").unbind("mouseenter mouseleave");});});</script>
</head>
<body>
<input type="button" value="绑定事件" id="btn">
<input type="button" value="解绑事件" id="btn2">
<div id="dv"></div></body>
</html>delegate的解绑事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;background-color: green;cursor: pointer;}p {background-color: red;width: 80px;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// delegate绑定事件对应的方式的解绑方式// 点击第一个按钮,div有自己的点击事件,有鼠标进入和鼠标离开事件// 同时为p绑定点击事件$("#btn").click(function(){// 为div绑定事件$("#dv").click(function(){console.log("div被点了");}).mouseenter(function(){console.log("鼠标进来了");}).mouseleave(function(){console.log("鼠标离开了");});// 在div中创建一个p,同时为p绑定点击事件$("<p>这是一个p</p>").appendTo($("#dv"));// 为p绑定事件$("#dv").delegate("p","click",function(){console.log("啊,p被点了");});$("#dv").delegate("p","mouseenter",function(){console.log("p的鼠标进入");});});// 第二个按钮解绑事件$("#btn2").click(function(){// p的点击事件没有了,移除了p的所有的事件// $("#dv").undelegate();// 移除的是p的点击事件// $("#dv").undelegate("p","click");// 可以移除多个事件,但是每个事件之间用空格隔开$("#dv").undelegate("p","click mouseenter");});});</script>
</head>
<body>
<input type="button" value="绑定事件" id="btn">
<input type="button" value="解绑事件" id="btn2">
<div id="dv"></div></body>
</html>off的解绑事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;background-color: green;cursor: pointer;}p {background-color: red;width: 80px;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// delegate绑定事件对应的方式的解绑方式// 点击第一个按钮,div有自己的点击事件,有鼠标进入和鼠标离开事件// 同时为p绑定点击事件$("#btn").click(function(){// 为div绑定事件// 点击事件$("#dv").click(function(){console.log("div被点了");// 鼠标进入}).mouseenter(function(){console.log("鼠标进来了");// 鼠标离开}).mouseleave(function(){console.log("鼠标离开了");});// 在div中创建一个p,同时为p绑定点击事件$("<p>这是一个p</p>").appendTo($("#dv"));// 为p绑定事件$("#dv").on("click","p",function(){console.log("啊,p被点了");});$("#dv").on("mouseenter","p",function(){console.log("啊,进入到p里面来了");});$("#dv").on("click","span",function(){console.log("哦,span被点了");});});// 第二个按钮解绑事件$("#btn2").click(function(){// 解绑事件// 父级元素和子级元素的所有的事件全部解绑// $("#dv").off();// 把父级元素和子级元素的点击事件解绑// $("#dv").off("click");// 父级元素和子级元素的多个事件,中间用空格// $("#dv").off("click mouseenter");// 解绑p标签的点击事件// $("#dv").off("click","p");// p的两个事件都没了// $("#dv").off("click mouseenter","p");// p的所有的事件全部解绑// $("#dv").off("","p");// 干掉div中所有的子元素的点击事件$("#dv").off("click","**");});// 页面加载$(function(){// 为按钮绑定点击事件$("#btn1").on("click",function(){console.log("哈哈,我又变帅了");});});});</script>
</head>
<body>
<input type="button" value="哈哈,我是按钮" id="btn1">
<input type="button" value="绑定事件" id="btn">
<input type="button" value="解绑事件" id="btn2">
<div id="dv"><span>这是span</span>
</div></body>
</html>动态添加行 为元素解绑事件 delegate的解绑事件 off的解绑事件相关推荐
- jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
- 【JQ】动态添加的元素无法触发绑定事件的解决办法
情景 如上面的模态框,点击左边的添加按钮,会把整个div添加到右边,点击右边的删除按钮,则把整个div添加回左边,就类似于穿梭框的样子. 不难,下面是一开始想到的方案: $('#SelectedDev ...
- jQuery动态生成的元素如何绑定事件
这段时间在写代码的时候遇到一个问题,通过append()添加的节点,点击事件不起作用.当时我百思不得其解,各种找错都没找到错误的原因.后来才发现是动态生成节点的问题,还是自己没有经验啊. 下面来 ...
- JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）...
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...
- jQuery给动态添加的元素绑定事件的方法
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
- jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- 动态添加html元素绑定事件,关于javascript：jQuery如何将onclick事件绑定到动态添加的HTML元素...
本问题已经有最佳答案,请猛点这里访问. 我想将onclick事件绑定到用jquery动态插入的元素 但它从不运行绑定函数.如果您能指出这个示例为什么不起作用,以及如何使它正常运行,我将非常高兴: /p ...
- jquery动态生成的元素添加事件的方法
动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() {alert(this.va ...
- 原生js 给动态添加的元素添加（事件监听器）
原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...
最新文章
- 厌倦了 VMware，试试更轻量级的虚拟机！
- error:“ACCESS_MASK”: 不明确的符号
- 机器人雅可比矩阵的求法_构造法
- 浅析“字典--NSDirctionary”理论
- android 集成同一interface不同泛型_Dig101:Go之读懂interface的底层设计
- Gym - 100917F Find the Length-用最小路径树求最小环
- 微电子科学与工程要学计算机吗,微电子科学与工程专业就业前景如何 有前途吗...
- MySQL压测工具--sysbench
- IntelliJ 一键添加双引号
- 在组件中获取Application
- json数据出现$ref: $.list[0]的解决办法
- 204. Count Primes 1
- Javaparser使用
- Tahoma Arial Verdana三种字体的选择
- 简单线性相关案例-求相关系数
- Linux查询IP失败
- php中的implode,php implode函数 多维数组
- 杨氏集团出品：打怪小游戏
- python实现新冠疫情各国人数动态图
- Bootstrap——网格布局
热门文章
- TOJ 4393 Game
- Page，你是怎样处理回发事件的？
- 【CentOS 7笔记46】，crondtab任务计划和chkconfig系统服务管理#
- Docker学习笔记_安装和使用Apache
- Kotlin中的高阶函数
- load和initialize
- Marble原理之线程中断
- Oracle Redefine table online will clone and exchange source and intermedia table - 3
- 第十二节 VMware View 6.0 菜鸟入门 部署和安装2008 R2 RDS服务
- Effective C# 原则34：创建大容量的Web API(译)