Question

我遇到了jQuery点击功能的问题。当用户单击HTML按钮时，我的jQuery会根据存储在数据库中的相应开/关状态动态加载某些样式的复选框/切换开关。

然后我为每个动态加载的切换开关添加了一个click功能，这样当用户点击它时，它会用新状态更新数据库，然后用Ajax再次调用GetAllSwitches函数加载开关的当前状态从DB返回到resultScreen。

它可以正常更新数据库中的状态，但程序会记住之前的“点击”并再次运行它们，然后每次用户点击时都会显示新的点击状态。因此，在第一次单击时，它会生成1个http请求，第2个，第3个，第4个，第4个8个等等。问题是在几次单击之后，ajax调用变得非常大。

我不是那种经验丰富的Javascript，所以我知道我的代码很冗长而且我显然遗漏了一些东西，但有没有修复或更好的方法呢？

总之，我想要实现的目标是：

用户点击allSwitches
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);
                }});    
        }   
    })
});
}

非常感谢。

Answer 1

最简单的方法是在设置新点击之前取消绑定前一次点击。像这样更改 upToge（）正文：

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

Answer 2

您正在将click处理程序添加到className，当您清空#resultsScreen div时，该处理程序不会更改。您可以看到处理程序如何堆积在这个jsbin中：http://jsbin.com/hizigutogi/edit?js,console,output（填充div，单击红色框，清空它，再次填充，然后再单击几次）

尝试将对jQuery对象tr的引用传递给upTog并直接将click处理程序添加到其中，而不是将其附加到类名。

Javascript动态切换加倍Ajax调用

2 个答案: