点击事件运行 3 次答案

【问题标题】：Click event running 3 times点击事件运行 3 次
【发布时间】：2014-09-05 02:46:37
【问题描述】：

我有这个脚本，它使用 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);
    }
});

【问题讨论】：

您已经分配了 3 次事件处理程序（来自reservas 的每个项目 1 次）。所以触发了3次。
@Nescau - 希望您不介意，我回滚了您的问题以包含代码示例，以便该问题对未来的访问者仍然有用。没有代码，问题和答案就没有多大意义。随意编辑您不想留下的任何具体内容，但我鼓励您留下所有相关部分。

标签： javascript jquery get put

【解决方案1】：

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

【讨论】：

【解决方案2】：

您在另一个请求的成功事件中全局分配您的点击处理程序。它也在 foreach 循环中。要解决这个问题，请将点击处理程序分配移到成功处理程序之外和任何循环之外。

【讨论】：