出现问题的代码：

<!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. Java中内部类和静态内部类的区别

    内部类和静态内部类 示例 public class OuterClass { private int numPrivate = 1; public int numPublic = 2; public ...

  2. xmake v2.3.2 发布, 带来和ninja一样快的构建速度

    这个版本重点重构优化了下内部并行构建机制,实现多个target间源文件的并行编译,以及并行link的支持,同时优化了xmake的一些内部损耗,修复影响编译速度的一些bug. 通过测试对比,目前的整体构 ...

  3. 2017-12-08高级.net 面试小结

    现在思维是企业级开发思维 应该往互联网思维转变,主要涉及,队列 ,消息,数据并发,数据安全,前端,vue,element UI 以下为速8酒店笔试题 1.有如下代码: string s1;string ...

  4. 条件随机场 CRF

    2019-09-29 15:38:26 问题描述:请解释一下NER任务中CRF层的作用. 问题求解: 在做NER任务的时候,神经网络学习到了文本间的信息,而CRF学习到了Tag间的信息. 加入CRF与 ...

  5. "xaml+cs"桌面客户端跨平台初体验

    "Xaml+C#"桌面客户端跨平台初体验 前言   随着 .Net 5的到来,微软在 .Net 跨平台路上又开始了一个更高的起点.回顾.Net Core近几年的成果,可谓是让.Ne ...

  6. setAttribute 方法

    IE8及以下不支持 setAttribute用来修改dom标签上的属性比如(onclick); getAttribute用来获取dom标签上的属性

  7. Java Web项目bug经验202002112049

    运行程序后,如果配置有问题,可能不会进代码,而直接报错.

  8. 前端之jQuery基础篇02-事件

    什么是事件: 在元素上移动鼠标. 选取单选按钮 点击元素 常见的DOM事件: 鼠标事件:click() 当鼠标单击发生click事件 : <!DOCTYPE html> <html& ...

  9. ES6 class 类的理解（一）

    优点 ES6 的类提供了几点明显的好处: 兼容当前大量的代码. 相对于构造器和构造器继承,类使初学者更容易入门. 子类化在语言层面支持. 可以子类化内置的构造器. 不再需要继承库:框架之间的代码变得更 ...

  10. Educational Codeforces Round 83 (Rated for Div. 2)

    A. Two Regular Polygons 题意:给你一个 正n边形,问你能否以这个 n 的其中一些顶点组成一个 m边形, 思路 :如果 n % m == 0 ,就可 收获:边均分 B. Bogo ...