出现问题的代码：

<!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.querySelector(".xx").onclick = function(){
XXX
}
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事件，出现重复执行的问题的更多相关文章

  1. jQuery绑定和解绑点击事件及重复绑定解决办法

    原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...

  2. 解决VS2010中winsock.h与winsock2.h冲突(重复定义)——转载

    解决VS2010中winsock.h与winsock2.h冲突(重复定义)——转载 当这两个头文件顺序颠倒时,编译会出现许多莫名其妙的错误,错误如下: 1>…\include\ws2def.h( ...

  3. 解决jQuery中dbclick事件触发两次click事件

    首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...

  4. jQuery中怎样阻止后绑定事件

    你的代码在页面载入过程中已经完成事件绑定了,没有阻止后绑定的事件的办法了,不过可以删除当前指定节点的事件绑定.方法如下:$("#btn").click(function(){if( ...

  5. jquery中取消和绑定hover事件的正确方式

    在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑 ...

  6. 动态添加DOM时，绑定的click事件会重复执行

    最近因为业务需求,需要重写window的alert和confirm弹窗,但是每次显示的提示按钮不相同,所有每次打开的弹窗都需要重写生成,但是对于相同的按钮会保留上次创建时的click事件,所以当你创建 ...

  7. 使用jQuery中trigger()方法自动触发事件

    一.常用事件 在页面加载完成时  自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...

  8. 解决Jquery向页面append新元素之后事件的绑定问题

    /*经过用户技能标签增加样式*/ $(".s-edited").live("hover",function(){ $(this).toggleClass(&qu ...

  9. 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

    此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...

随机推荐

  1. IE 跨域session丢失问题

    在测试时发现session 取不到值,以为是session赋值除了问题,但是在Chrome中一切正常,故排除此原因.那问题肯定出在浏览器身上里.于是一步一步调试,发现在IE中,如果页面跳转,Sessi ...

  2. Oracle设置和修改system和scott的口令，并且如何连接到system和scott模式下

    1.在Oracle数据库中,有个示例模式scott和系统模式system. 2.在安装数据库时只是设置了system的口令,即密码,如果忘记的话可以使用如下办法,首先打开sqlplus工具或者cmd命 ...

  3. 洛谷 P1047 校门外的树 题解

    Case 1. 本题其实不难,直接模拟就可以了.时间复杂度: \(O(L \times M)\) Case 2. 考虑一个简单的增强:把原来的: \[L \leq 10^4,M \leq 10^2 \ ...

  4. intern()方法的使用

    intern() intern方法的作用是:如果字符串常量池中已经包含一个字符串等于此String对象的字符串,则返回常量池中的这个String对应的对象, 否则将其添加到常量池并返回常量池中的引用. ...

  5. 微信小程序分享转发用法大全——自定义分享、全局分享、组合分享

    官方提供的自定义分享 使用隐式页面配置函数实现的全局分享-推荐 使用隐式路由实现的全局分享-不推荐,仅供了解隐式路由 前言: 目前微信小程序只开放了页面自定义分享的API,为了能够更灵活的进行分享配置 ...

  6. VBScript - 动态 Array 实现方法大全！

    记录一些方法,关于 VBScript 中,动态 Array 的实现 ,也适用于 VBA, 很久以前,写 VBA 的时候,就觉得使用 Array 很不方便,因为大小固定, 当时想的是,要是 Array ...

  7. 使用node.js中遇到的一些小bug

    1.BUG Cannot set headers after they are sent to the client 解决:即发出一次请求得到两次或以上的回应时会出现此警告,此时注意查看再在一些条件下 ...

  8. JAVA中，一个类中，方法加不加static的区别，

    通俗理解: 1.若是对象的特有行为,(也就是某个实例方法特有的行为),不加static 2. 若是对象集合共有的集合,则加static static类型方法只可以访问静态变量和方法 实例方法可以访问实 ...

  9. Mob之社会化分享集成ShareSDK

    接着上篇顺便分享一篇自己使用 ShareSDK 的笔记,上篇我们集成了 SMSSDK 完成了短信接收验证码的功能,请参考Mob 之 短信验证集成 SMSSDK,如何在项目已经集成 SMSSDK 的情况 ...

  10. 相见恨晚的 Git 命令动画演示，一看就懂！

    虽然 Git 是一个强大的工具,但是我觉得大部分人都会同意我说的:它也可以是一个--噩梦!我一直觉得,使用 Git 的时候把操作过程在脑海里视觉化会非常有用:当我执行某个命令的时候,分支之间是如何交互 ...