[问题记录]--jquery中click事件的累加绑定，点击一次，执行多次

最新推荐文章于 2024-05-14 09:19:42 发布

雾47

最新推荐文章于 2024-05-14 09:19:42 发布

阅读量1k

点赞数 23

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_56374326/article/details/134872287

版权

在页面中为一个元素绑定事件，事件执行后页面未刷新且元素还在，然后再次点击，元素又被绑定个点击事件，这样第二次点击就会执行两次

解决办法：使用jquery的one()方法，为元素绑定一个一次性的事件处理函数，这个事件处理函数只会被执行一次

错误代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>首页</title>
    
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

</head>

<body>
    <form id="form" action="http://127.0.0.1:3000/comment/create" method="post">
        <div class="form-group">
            <textarea name="text" cols="30" rows="10" placeholder="请输入内容"></textarea>
        </div>
        <button type="submit">提交留言</button>
        <div class="radio_from">
            <div class="radio">
                <input id="all" type="radio" name="select" value="1" checked>
                <label for="all">看全部</label>
            </div>
            <div class="radio">
                <input id="self" type="radio" name="select" value="2">
                <label for="self">只看自己</label>

            </div>
        </div>
    </form>
    <hr>
    <div class="container"></div>
    <div class="pop-up">
        <div class="pop-up-box">

            <textarea name="text" cols="30" rows="10" class="substance" placeholder="请更改内容"></textarea>

            <div class="selete">
                <button class="sure" conclick="sure()">确定</button>
                <button class="cancel">取消</button>
            </div>
        </div>
        <!-- <img src="./headerImg.jpg" alt="头像"> -->
    </div>


</body>
<script>

    $(function () {
        getList()
        // 提交评论
        // 获取列表
        function getList(filterType = 1) {
            $.ajax({
                url: 'http://127.0.0.1:3000/comment/list',
                type: 'get',
                data: { filterType: filterType },
                dataType: "JSON",
                xhrFields: {
                    withCredentials: true //允许跨域带Cookie
                },
                success: function (res) {
          
                    let data = res.data
                    let str = ''
                    $.get({
                        url: 'http://127.0.0.1:3000/users/getUserInfo',
                        xhrFields: {
                            withCredentials: true //允许跨域带Cookie
                        },
                        success: function (res1) {
                            let username = res1.data.username
                            for (let i = 0; i < data.length; i++) {
                                var time = new Date(data[i].time)
                                //日期
                                var DD = String(time.getDate()).padStart(2, '0'); // 获取日
                                var MM = String(time.getMonth() + 1).padStart(2, '0'); //获取月份，1 月为 0
                                var yyyy = time.getFullYear(); // 获取年

                                // 时间
                                hh = String(time.getHours()).padStart(2, '0');       //获取当前小时数(0-23)
                                mm = String(time.getMinutes()).padStart(2, '0');     //获取当前分钟数(0-59)
                                ss = String(time.getSeconds()).padStart(2, '0');     //获取当前秒数(0-59)
                                data[i].time = yyyy + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss;
                                str += `<div class="content">
                                <div class="content_r">
                                   ${data[i].time}                      
                                </div>
                                <div class="content_l">
                                    <div class="title">                                    
                                        <img src="./headerImg.jpg" alt="头像">
                                        <span>${data[i].username}</span></div>
                                    <div class="text">
                                        ${data[i].content}
                        
                                    </div>
                                    <div ${username == data[i].username ? '' : 'class="operate"'} >
                                        <a class="edit" href="javascript:;" onClick="edit('${data[i]._id}') ">编辑</a>
                                        <a class='del' href="javascript:;" onClick="delete1('${data[i]._id}')"}>删除</a>
                                    </div>
                                </div>
                            </div>`
                            }
                            $('.container').html(str);
                        }
                    })
                }
            })
        }

        // 编辑

        window.edit = (id) => {
            console.log(1)  //正常，点击一次输出一次
            $('.pop-up').css({ 'display': 'block' })
            $('body').css({'overflow':'hidden'})


            $.ajax({

                url: 'http://127.0.0.1:3000/comment/getListOne',
                type: 'get',
                data: { _id: id },
                xhrFields: {
                    withCredentials: true //允许跨域带Cookie
                },
                success: function (res) {


                    let data = res.data[0]

                    $('textarea.substance').val(data.content)
                    
                        //点击确定触发

                        //解决方法 下行代码换成$('.sure').one('click',function(){
                        $('.sure').click(function () {
                            console.log(2)//第一次点击一个2，第二次点击俩个2  刷新后第一次编辑修改正常，再点其他编辑修改后，第一个内容也变


                            $.ajax({
                                url: 'http://127.0.0.1:3000/comment/update',
                                type: 'post',
                                data: { _id: data._id, content: $('textarea.substance').val() },
                                xhrFields: {
                                    withCredentials: true //允许跨域带Cookie
                                },
                                success: function (res1) {
                                    $('.pop-up').css({ 'display': 'none' })
                                    if ($('input:radio[name="select"]').prop('checked')) {
                                        getList()
                                    } else {
                                        getList(2)
                                    }
                                }
                            })
                            $('.pop-up').css({ 'display': 'none' })
                            $('body').css({'overflow':'auto'})
                        })
                    
                }
            })

        }       

    })
</script>

</html>

页面

点击编辑弹出框

出现问题，第一次编辑后点击确定正常修改，

第二次修改第二个

再次修改第一个内容，发现第二个也会变

jquery中click事件的累加绑定，点击一次，执行多次 - 简书 (jianshu.com)

jQuery one() 方法 | 菜鸟教程 (runoob.com)

雾47

关注

23
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
[问题记录]--jquery中click事件的累加绑定，点击一次，执行多次

在页面中为一个元素绑定事件，事件执行后页面未刷新且元素还在，然后再次点击，元素又被绑定个点击事件，这样第二次点击就会执行两次。，为元素绑定一个一次性的事件处理函数，这个事件处理函数只会被执行一次。出现问题，第一次编辑后点击确定正常修改，再次修改第一个内容，发现第二个也会变。
复制链接

扫一扫