出现问题的代码：

<!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. go语言周边

    博主收藏的go语言资料,分享一波~~~ 官网 https://golang.org/ (被墙) 镜像: http://docscn.studygolang.com/ 下载镜像: https://gom ...

  2. React Native升级

    几个月前创建了一个版本为0.60.4的项目,现要更新到最新版本0.61.4. 具体可查看 https://facebook.github.io/react-native/docs/upgrading# ...

  3. hdu2642二维树状数组，单点修改+区间查询

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/2642/ 代码如下: #include<bits/stdc++.h> using namespace ...

  4. SpringBoot2 整合 Swagger2

    SpringBoot2 整合 Swagger2 SpringBoot整合三板斧 第一步.引入pom <dependency> <groupId>com.spring4all&l ...

  5. Ansible Playbook 初识

    Ansible Playbook 基本概述与使用案例 主机规划 添加用户账号 说明: 1. 运维人员使用的登录账号: 2. 所有的业务都放在 /app/ 下「yun用户的家目录」,避免业务数据乱放: ...

  6. [BFS]Codeforces Igor In the Museum

     Igor In the Museum time limit per test 1 second memory limit per test 256 megabytes input standard ...

  7. 面试刷题28:如何写出安全的java代码?

    对jdk,jvm,java应用程序的攻击多种多样?那么从java程序员的角度,如何写出安全的代码呢? 我是李福春,我在准备面试,今天的题目是:如何写出安全的java代码? 答:这个需要从功能设计到实现 ...

  8. 使用tensorflow的softmax进行mnist识别

    tensorflow真是方便,看来深度学习需要怎么使用框架.如何建模- ''' softmax classifier for mnist created on 2019.9.28 author: vi ...

  9. Nginx打点服务器配置

    Nginx打点服务器配置 什么是打点服务器 他的作用是什么 打点服务器就是记录用户行为的服务器 单独从应用独立出来 目的就是为了减轻应用服务器压力 效果如下: 10.0.1.1 - - [05/Feb ...

  10. [noip模拟]计蒜姬<BFS>

    Description 兔纸们有一个计蒜姬,奇怪的是,这个计蒜姬只有一个寄存器X.兔纸们每次可以把寄存器中的数字取出,进行如下四种运算的一种后,将结果放回寄存器中.1.X=X+X2.X=X-X3.X= ...