出现问题的代码：

<!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. [Docker8]Dockerfiles

    Comment INSTRUCTION arguments FROM 基于哪个base镜像 RUN 执行命令并创建新的镜像层,run经常用于安装软件包 MAINTAINER 镜像创建者 copy 将文 ...

  2. [单调栈]小A的柱状图

    链接:https://ac.nowcoder.com/acm/problem/23619来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...

  3. Excel知识点与技巧1

    1.工作区:方便两个工作表之间进行对比 2.工作表标签颜色 3.交换两列的次序 4.快速到达边界:即快速到达第一行或最后一行 5.冻结窗格:可以固定某几行或某几列一直存在于窗口,不会随着往下拉或往右拉 ...

  4. Apache服务器故障排除攻略

    Apache服务器故障排除攻略 应用服务器Apache浏览器配置管理网络应用  随着网络技术的普及.应用和Web技术的不断完善,Web服务已经成为互联网上重要的服务形式之一.原有的客户端/服务器模式正 ...

  5. 使用PyTorch建立你的第一个文本分类模型

    概述 学习如何使用PyTorch执行文本分类 理解解决文本分类时所涉及的要点 学习使用包填充(Pack Padding)特性 介绍 我总是使用最先进的架构来在一些比赛提交模型结果.得益于PyTorch ...

  6. nodejs使用express中静态资源托管(express.static())时遇到的bug

    如下:将test.html的页面挂载在服务器上, const express= require('express') const fs= require('fs') let app = express ...

  7. 深入理解NIO（一）—— NIO的简单使用及其三大组件介绍

    深入理解NIO(一)—— NIO的简单使用及其三大组件介绍 深入理解NIO系列分为四个部分 第一个部分也就是本节为NIO的简单使用(我很少写这种新手教程,所以如果你是复习还好,应该不难理解这篇,但如果 ...

  8. [noip模拟]数字对<RMQ&二分>

    数字对 [题目描述] 小H是个善于思考的学生,现在她又在思考一个有关序列的问题. 她的面前浮现出一个长度为n的序列{ai},她想找出一段区间[L, R](1 <= L <= R <= ...

  9. Pytest系列（2） - assert断言详细使用

    如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 前言 与unittest不同,py ...

  10. winsocket编程笔记（一）

    前言: 因为疫情原因,现在一直在网上授课,教师在讲述winsocket这一课程时没有给予我们课本,只有毫不相搭的linux环境的socket编程视频,故于此(开学第七周)总结winsocket的内容. ...