解决Jquery中click里面包含click事件，出现重复执行的问题
出现问题的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
* {margin: ; padding: ;}
#table {border: 1px solid gray; border-collapse: collapse; width: 500px;}
tr {height: 30px;}
th {border: 1px solid gray;}
td {border: 1px solid gray;text-align: center;}
td a {margin-right: 5px; color: blue; text-decoration: none;} #popDiv, #editDiv {border: 1px solid silver; width: 315px; padding: 1px; margin-top: 10px; position: absolute; left: %; z-index: ; display: none;}
.pop p {height: 30px; margin-top: 20px; clear: both;}
.pop a {display: block; float: right; text-decoration: none; font-size: 12px;}
.pop .input {height: 20px; line-height: 20px;}
/*#bottom {width: 100%; height: 30px; margin: 0 auto;}*/
#sub {display: block; height: 30px; margin: auto;} .mask {background-color: #; position: absolute; left: ; top: ; z-index: ;}
</style>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
</head>
<body>
<table id="table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td></td>
<td>PHP</td>
<td></td>
<td><a href="#" class="edit">修改</a></td>
</tr>
<tr>
<td>李四</td>
<td></td>
<td>Java</td>
<td></td>
<td><a href="#" class="edit">修改</a></td>
</tr>
<tr>
<td>王五</td>
<td></td>
<td>Python</td>
<td></td>
<td><a href="#" class="edit">修改</a></td>
</tr>
<tr>
<td>赵六</td>
<td></td>
<td>Javascript</td>
<td></td>
<td><a href="#" class="edit">修改</a></td>
</tr>
</table> <div id="editDiv" class="pop">
<a href="#" class="close">close</a>
<p><strong>姓名：</strong><input type="text" class="input" /></p>
<p><strong>年龄：</strong><input type="text" class="input" /></p>
<p><strong>职位：</strong><input type="text" class="input" /></p>
<p><strong>工资：</strong><input type="text" class="input" /></p>
<input type="button" id="sub" value="提交" />
</div> <script type="text/javascript">
// 点击'修改'链接
$('a.edit').click(function () {
var arr = []; $(this).parent().siblings().each(function () {
arr.push($(this).text());
}); $('#editDiv').show().find('p').each(function (i) {
$(this).find('input:text').val(arr[i]);
}); var aTr = $(this); $('#sub').click(function () {
alert('');
var data = [];
$(this).prevUntil('a.close').each(function () {
data.push($(this).find('input:text').val());
}); data.reverse(); aTr.parent().siblings().each(function (i) {
$(this).text(data[i]);
}); $(this).parent().hide();
$('div.mask').remove();
}); // 添加遮罩层
var maskHeight = $(document).height();
var maskWidth = $(document).width();
$('<div class="mask"></div>').appendTo($('body'));
$('div.mask').css({
'width':maskWidth,
'height':maskHeight,
'opacity':0.4
});
}); $('a.close').click(function () {
$(this).parent().hide();
$('div.mask').remove();
});
</script>
</body>
</html>
解决方法一：
$('#sub').unbind('click').click(function () {
...
});
每次绑定前先取消上次的绑定。
方法二：
内层绑定事件之前，先解除事件目标对象上绑定的事件。
$(function(){
$("#sub").click(function(){
XXX
$(".close").off("click"); //解除绑定的点击事件
$("#XXX").click(function(){
XXX
})
})
})
方法三：
用原生JS实现点击，注意这个如果是用class实现点击，请用：querySelector，用getElementsByClassName无效：
document.getElementById('sub').onclick = function () {
alert('');
var data = [];
$(this).prevUntil('a.close').each(function () {
data.push($(this).find('input:text').val());
});
data.reverse();
aTr.parent().siblings().each(function (i) {
$(this).text(data[i]);
});
$(this).parent().hide();
$('div.mask').remove();
};
解决Jquery中click里面包含click事件，出现重复执行的问题的更多相关文章
- jQuery绑定和解绑点击事件及重复绑定解决办法
原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...
- 解决VS2010中winsock.h与winsock2.h冲突(重复定义)——转载
解决VS2010中winsock.h与winsock2.h冲突(重复定义)——转载 当这两个头文件顺序颠倒时,编译会出现许多莫名其妙的错误,错误如下: 1>…\include\ws2def.h( ...
- 解决jQuery中dbclick事件触发两次click事件
首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...
- jQuery中怎样阻止后绑定事件
你的代码在页面载入过程中已经完成事件绑定了,没有阻止后绑定的事件的办法了,不过可以删除当前指定节点的事件绑定.方法如下:$("#btn").click(function(){if( ...
- jquery中取消和绑定hover事件的正确方式
在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑 ...
- 动态添加DOM时，绑定的click事件会重复执行
最近因为业务需求,需要重写window的alert和confirm弹窗,但是每次显示的提示按钮不相同,所有每次打开的弹窗都需要重写生成,但是对于相同的按钮会保留上次创建时的click事件,所以当你创建 ...
- 使用jQuery中trigger()方法自动触发事件
一.常用事件 在页面加载完成时 自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...
- 解决Jquery向页面append新元素之后事件的绑定问题
/*经过用户技能标签增加样式*/ $(".s-edited").live("hover",function(){ $(this).toggleClass(&qu ...
- 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题
此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...
随机推荐
- 为什么Mysql的常用引擎都默认使用B+树作为索引？
一.前言 为了讲清楚这个问题,我们要先了解什么是索引. 我记得刚刚学习数据库的时候,老师喜欢用书本的目录来类比数据库的索引,并告诉我们索引能够像目录一样,让我们更快地找到想要找到的数据. 如果是第一次 ...
- QQ小程序支付
QQ小程序支付 Java后端 同学折腾QQ小程序的支付折腾了好几天,没有完成统一下单,因为我做过微信和支付宝支付,他就让我帮忙搞 我搞了好两三个小时,也没搞出来,最终我觉得问题在商户key那里,问了几 ...
- PHP session反序列化
先来了解一下关于session的一些基础知识 什么是session 在计算机中,尤其是在网络应用中,称为“会话控制”.Session 对象存储特定用户会话所需的属性及配置信息.这样,当用户在应用程序的 ...
- 题解 P1305 【新二叉树】
好像没有人搞\(\color{green}map\)反映,没有人用\(\color{green}map\)反映搞并查集! \(\color{green}map\)第一个好处是作为一个数组,可以开很大! ...
- mybatis类型转换器 - 自定义全局转换enum
在数据模型.接口参数等场景部分属性参数为一些常量值,比如性别:男.女.若是定义成int或String类型,于是类型本身的范围太宽,要求使用者需要了解底层的业务方可知如何传值,那整体来看增加沟通成本,对 ...
- [bfs,深度记录] East Central North America Regional Contest 2016 (ECNA 2016) D Lost in Translation
Problem D Lost in Translation The word is out that you’ve just finished writing a book entitled How ...
- 字节转换函数 htonl*的由来与函数定义...
字节转换字符由来: 在网络上面有着许多类型的机器,这些机器在表示数据的字节顺序是不同的, 比如i386芯片是低字节在内存地址的低端, intel处理器将32位的整数分4个连续的字节,并以字节序1-2- ...
- [LeetCode] 935. Knight Dialer 骑士拨号器
A chess knight can move as indicated in the chess diagram below: . This time, we place o ...
- 【原创】linux spinlock/rwlock/seqlock原理剖析（基于ARM64）
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...
- coding++：mybatis 嵌套查询子查询column传多个参数描述
mybatis 嵌套查询子查询column传多个参数如下: 2.代码示例 备注:注意,相同颜色的单词都是有关联的 <resultMap id="blogResult" typ ...