javascript - 点击事件运行3次

Question

我有一个脚本，它使用 GET 从数据库中获取数据并在 HTML 中显示它们，然后当我按下复选框时在数据库中更新，但是当我按下复选框时，PUT 会完成三次。有谁知道如何解决这个问题？

欢迎任何帮助。

代码如下:

$.ajax({
    type: 'GET',
    async: false,
    url: 'https://app.myapp.com/reservations',
    success:function(reservations){

        reservas.forEach (function (reservation) {
            var HTML = [];


            HTML.push('<tr class="reservations">');
            HTML.push('<td> <input type="checkbox" class="checkbox" data-id="' + reservation._id + '" data-nome="' + reservation.nome + '" data-email="' + reservation.email + '" /> </td>');
            HTML.push('<td>' + reservation._id + '</td>');
            HTML.push('<td>' + reservation.nome + '</td>');
            HTML.push('<td>' + reservation.email + '</td>');
            HTML.push('</tr>');
            $('tbody').append(HTML.join(""));

            $(function(){
                $(document).on('click', '.checkbox', function(){
                    console.log('salvo');
                    var update = $(this);


                    $.ajax({

                        type: 'PUT',
                        url: 'https://localhost/datas',
                        data: {
                            _id: update.attr('data-id'),
                            nome: update.attr('data-nome'),
                            email: update.attr('data-email'),
                        },
                        sucess:function (success) {
                            alert('updated!!');
                        },
                        error:function(err) {
                            console.log(err);
                        }
                    });
                });
            });
        })
    },
    error:function(e){
        console.log(e);
    }
});

Answer 1

问题是您在每次迭代中添加事件。您应该从 .each 中取出事件监听器函数。当您在文档本身上使用 jQuery 函数时，您可以将该事件监听器完全从 ajax 函数中取出，并且无论如何它都会监听复选框上的单击(因为，如上所述，您将事件绑定(bind)到文档而不是复选框本身，因此在绑定(bind)事件之前不需要它们存在)。