Javascript动态切换加倍Ajax调用

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

然后，我为每个动态加载的切换开关添加了一个点击函数，以便当用户点击它时，它用新状态更新数据库，然后用Ajax调用GetAllSwitches函数再次加载当前状态从数据库切换回resultScreen。

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

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

总之我想要实现的是：

用户点击allSwitches
Ajax调用返回的所有对象与屏幕上的一个拨动开关
有拨动式开关的点击哪些更新数据库具有新状态的数据库
允许按用户喜欢的次数多次单击开关，仅对DB进行一次更新

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); 
       }});  
     } 
    }) 
}); 
}

非常感谢。

来源

2016-07-30 Sam

最简单的方法是在设置新的之前解除先前的点击。更改upToge（）体是这样的：

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

来源

2016-07-30 19:04:16

谢谢，这工作完美。 – Sam

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

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

来源

2016-07-30 14:05:02 horyd

我要补充的是，动态列表显示了所有的从DB“灯”，并点击他们不更新基于其“类名”正确的光。我试过直接添加tr，所有这些都会更新所有不同的“lightNames”，而不是特定的。 – Sam

但是，这种行为并未附加到您如何处理点击事件。这是因为，在POST到/ UpdateLight的成功之中，您正在对所有数据执行另一个完整的GET，然后重新渲染整个数据集。下面是一个更好的JSBin，显示元素传递到创建点击处理的函数，并演示它如何不堆叠：http://jsbin.com/bivadumijo/edit?js,console,output – horyd

Javascript动态切换加倍Ajax调用

回答

相关问题