Javascript динамический переключатель удвоения Ajax вызывает

Question

У меня возникла проблема с функцией jQuery click. Когда пользователь нажимает кнопку HTML, мой jQuery динамически загружает некоторые стильные переключатели/переключатели на основе их соответствующего состояния включения/выключения, хранящегося в базе данных.

Затем я добавил функцию щелчка к каждому динамически загруженному тумблеру, чтобы при щелчке пользователем он обновлял базу данных новым состоянием, а затем с помощью Ajax снова вызывал функцию GetAllSwitches, загружая текущее состояние переключается с БД обратно в результирующий экран.

Он работает, обновляет состояние в БД правильно, но программа запоминает предыдущие «клики» и запускает их все снова, а затем новое состояние щелчка каждый раз, когда пользователь нажимает. Таким образом, при первом щелчке он делает 1 HTTP-запрос, 2-й, 3-й, 4-й, 4-й и т. Д. Проблема заключается в том, что через несколько кликов призывы ajax становятся огромными.

Я не так разбираюсь в Javascript, поэтому я знаю, что мой код является многословным, и я явно чего-то пропустил, но есть ли какие-либо исправления или более подходящие подходы к этому?

В общем, что я хочу достичь, это:

1. Пользователь щелкает allSwitches
2. Ajax вызов к базе данных, которая возвращает все объекты с тумблером на экране
3. Have кликабельным тумблер, который обновляет база данных с новым состоянием
4. Разрешайте переключателям нажимать столько раз, сколько пользователю нравится делать только одно обновление для БД

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 к классуName, который не меняется, когда вы заполняете div #resultsScreen. Вы можете увидеть, как обработчики накапливаются в этом jsbin: http://jsbin.com/hizigutogi/edit?js,console,output (заполните div, нажмите красную рамку, залейте ее, залейте ее еще раз и нажмите еще несколько раз)

Попробуйте передать ссылку на объект jQuery tr в upTog и добавление на него обработчика кликов непосредственно, вместо того, чтобы прикреплять его к имени класса.