出现问题的代码：

<!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. MassDNS：跨域DNS枚举工具

    MassDNS:跨域DNS枚举工具 simeon 原文地址:http://offsecbyautomation.com/Use-MassDNS/ 工具地址:https://github.com/ble ...

  2. 《面试经典系列》- MySQL数据库存储引擎

    一.MySQL有多少种存储引擎? 在MySQL5之后,支持的存储引擎有十多个,但是我们常用的就那么几种,而且,默认支持的也是 InnoDB. 通过命令:show engines \g,我们可以查看到当 ...

  3. effective-java学习笔记---使用枚举类型替代整型常量34

    1.要将数据与枚举常量相关联,请声明实例属性并编写一个构造方法,构造方法带有数据并将数据保存在属性中. // Enum type with data and behavior public enum ...

  4. Github标星过万，Python新手100天学习计划，这次再学不会算我输！

      作为目前最火也是最实用的编程语言,Python不仅是新手入门程序界的首选,也逐渐成为了从大厂到小厂,招牌需求list的必要一条. 当然,学Python这件事情,你可能也和文摘菌一样,已经下了一百次 ...

  5. GitHub标星2.6万！Python算法新手入门大全

    今天推荐一个Python学习的干货. 几个印度小哥,在GitHub上建了一个各种Python算法的新手入门大全,现在标星已经超过2.6万.这个项目主要包括两部分内容:一是各种算法的基本原理讲解,二是各 ...

  6. java——基本数据类型

    一.整型 bite 1字节 2^0 short 2字节 2^1 int 4字节 2^2 long  8字节 2^3 整形常量默认为int型,所以定义long 型时候要在常量后面加 L 或 l ,其他类 ...

  7. HDU - 3068 最长回文manacher马拉车算法

    # a # b # b # a # 当我们遇到回判断最长回文字符串问题的时候,若果用暴力的方法来做,就是在字符串中间添加 #,然后遍历每一个字符,找到最长的回文字符串.那么马拉车算法就是在这个基础上进 ...

  8. Linux下段错误（C语言）

    问题描述:在Linux下编程有时会出现段错误的提醒,出现这种错误有可能是因为以下几种原因 1.数组越界:如果在初始化或者接收输入时内容超过了定义好的数组元素个数时会出现段错误,Linux的数组越界检查 ...

  9. MiniUi遇到的一个Bug或者说坑,以div里面的内容自适应高度

    页面源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  10. B - Charlie's Change

    Charlie is a driver of Advanced Cargo Movement, Ltd. Charlie drives a lot and so he often buys coffe ...