Javascript动态切换Ajax调用

我对jQuery单击函数有问题。当用户单击HTML按钮时，我的jQuery会根据数据库中存储的相应开/关状态动态加载一些样式化的复选框/切换开关

然后，我向每个动态加载的切换开关添加了一个click函数，这样当用户单击它时，它会用新状态更新数据库，然后，它会使用Ajax调用getAllSwitchs函数，再次将开关的当前状态从DB加载回resultScreen

它可以正常工作，正确更新数据库中的状态，但程序会记住以前的“单击”，并在每次用户单击时再次运行它们，然后再运行新的单击状态。所以，在第一次点击它会发出1个http请求，第2个2个，3个4，4 8等等。问题是在点击几下之后ajax调用变得巨大

我在Javascript方面没有那么丰富的经验，所以我知道我的代码很冗长，很明显我遗漏了一些东西，但是有没有修复或更好的方法来解决这个问题

总之，我想要实现的是：

用户单击所有开关

对数据库的Ajax调用，该数据库通过屏幕上的切换开关返回所有对象

使切换开关可单击，以使用新状态更新数据库

允许按用户的喜好多次单击开关，只对数据库进行一次更新

HTML

<fieldset>
<legend> Get All Lights Dynamically</legend>
<input type="button" value="Show All" id="allSwitches"/> 
</fieldset>

<fieldset>
<div id='resultScreen'></div>
</fieldset>

动态获取所有灯光

JavaScript

$(document).ready(function(){

    $("#allSwitches").click(function(){

    $.ajax({
        url: 'GetAll',
        type: 'GET',
        dataType: 'text',       

        success: function(data) {
            getAllSwitches(data)
         });
    });     
  });


function getAllSwitches(data){
    var tr; 
    myData = $.parseJSON(data);

    for(var i = 0; i < myData.length; i++){
        tr = $('<tr/>');


        if(myData[i].state=="On"){
        tr.append('<div id="togs' + i + '">' + '<label class="switch">' +
                  '<input type="checkbox" class="' + myData[i].lightName +'" checked>' +
                  '<div class="slider round"></div>'
                +'</label>' + '</div>');

    tr.append("<td>" + myData[i].lightName + 
             " is " + myData[i].state + "</td>");

    $('#resultScreen').append(tr);

    var className = '.' + myData[i]lightName;
    var lightName = myData[i].lightName;
    var state = "Off";

        upTog(className, lightName, state);



    } else if (myData[i].state=="Off"){
        tr.append('<label class="switch">' +
                  '<input type="checkbox" class="' + myData[i].lightName +'" >' +
                  '<div class="slider round"></div>'
                +'</label>');

    tr.append("<td>" + myData[i].lightName + 
             " is " + myData[i].state + "</td>");


    $('#resultScreen').append(tr);

    var className = '.' + myData[i].lightName;
    var lightName = myData[i].lightName;
    var state = "On";

    upTog(className, lightName, state);

    }
}
}

function upTog(className, lightName, state){

$(document).on('click', className, function() { 

    $.ajax({
        url: 'UpdateLight?lightName=' + lightName + "&state=" + state,
        type: 'POST',
        dataType: 'text',
        success:function(data){
                $.ajax({
                url: 'GetAll',
                type: 'GET',
                dataType: 'text',       

                success: function(data) {
                    $('#resultScreen').empty();
                    getAllSwitches(data);
                }});    
        }   
    })
});
}

$（文档）.ready（函数（）{
$（“#所有开关”）。单击（函数（）{
$.ajax({
url:'GetAll'，
键入：“GET”，
数据类型：“文本”，
成功：功能（数据）{
GetAllSwitchs（数据）
});
});     
});
函数GetAllSwitchs（数据）{
var-tr；
myData=$.parseJSON（数据）；
对于（var i=0；i

---

非常感谢。

您正在将

单击
处理程序添加到类名中，当您清空
#resultsScreen
div时，处理程序不会改变。您可以看到处理程序是如何堆积在这个jsbin中的：（填充div，单击红色框，清空它，再次填充，然后再单击几次）

尝试将对jQuery对象的引用
tr
传递到
upTog
中，并将单击处理程序直接添加到该对象上，而不是将其附加到类名上。
您正在将
单击处理程序添加到类名中，当清空
#resultscreen
div时，该处理程序不会改变。您可以看到该处理程序是如何操作的rs在这个jsbin中堆积：（填充div，单击红色框，清空它，再次填充它，再单击几次）

尝试将对jQuery对象的引用
tr
传递到
upTog
中，并将单击处理程序直接添加到该对象上，而不是将其附加到类名上。
最简单的方法是在设置新的单击之前解除上一次单击的绑定。
更改UpPage（）主体，如下所示：

        $(className).unbind( "click" );
        $(className).on('click', function () {
            /* Your ajax call here */
        });

最简单的方法是在设置新单击之前解除上一次单击的绑定。
更改UpPage（）主体，如下所示：

        $(className).unbind( "click" );
        $(className).on('click', function () {
            /* Your ajax call here */
        });

我应该补充的是，动态列表显示了数据库中的所有“灯光”，单击它们会根据其“类名”更新正确的灯光。我已经尝试直接添加tr，所做的只是更新所有不同的“灯光名”但这种行为与处理点击事件的方式无关。这是因为，在发布到/UpdateLight的成功过程中，您正在对所有数据进行另一次完整的获取，然后重新呈现整个数据集。下面是一个更好的JSBin，它显示了将元素传递到创建他单击处理，并演示它如何不堆叠：我应该补充一点，动态列表显示了数据库中的所有“灯光”，单击它们会根据其“类名”更新正确的灯光。我已经尝试直接添加tr，所做的只是更新所有不同的“灯光名”但这种行为与处理点击事件的方式无关。这是因为，在发布到/UpdateLight的成功过程中，您正在对所有数据进行另一次完整的获取，然后重新呈现整个数据集。下面是一个更好的JSBin，它显示了将元素传递到创建他单击处理，并演示它如何不堆叠：