首页 > Web开发 > 详细

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

时间:2020-03-27 13:33:29      阅读:66      评论:0      收藏:0      [点我收藏+]

 

出现问题的代码:

<!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; 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: 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 {width: 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();
            };

 

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

原文:https://www.cnblogs.com/smedas/p/12580706.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!