解决Jquery中click里面包含click事件，出现重复执行的问题

出现问题的代码：

<!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: 0; padding: 0;}
    #table {border: 1px solid gray; border-collapse: collapse;  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;  315px; padding: 1px; margin-top: 10px; position: absolute; left: 38%; z-index: 4; 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 { 100%; height: 30px; margin: 0 auto;}*/
    #sub {display: block; height: 30px; margin: 0 auto;}

    .mask {background-color: #000; position: absolute; left: 0; top: 0; z-index: 2;}
</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>23</td>
            <td>PHP</td>
            <td>79999</td>
            <td><a href="#" class="edit">修改</a></td>
        </tr>
        <tr>
            <td>李四</td>
            <td>21</td>
            <td>Java</td>
            <td>12000</td>
            <td><a href="#" class="edit">修改</a></td>
        </tr>
        <tr>
            <td>王五</td>
            <td>34</td>
            <td>Python</td>
            <td>29999</td>
            <td><a href="#" class="edit">修改</a></td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>37</td>
            <td>Javascript</td>
            <td>65450</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('2222222');
                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('1111111');
                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();
            };