JSON Dynamic allocation to onclick events by JQUERY

Question

I have following code to add dynamically single JSON value of 'deviceId' to

.on("change", function(){ HandleHS100( deviceId , 'off' ); });

Cycle runs twice and it happens that HandleHS100 function below only contains JSON value of deviceId from last pass of the loop.

But debuging shows that loop is processed correctly and each loop contains unique deviceId:

loop 1: json deviceId: 800663A7C2C71A3B5F38A68EB082C6A3171E85C4

loop 2: json deviceId: 80069411838A3BFF13210D4571F9F8DE172AEC62

it looks that problem is with allocation of deviceId param to the onclick listener.

$.ajax({
        type: "GET",
        url: "myfile.php",
        cache: false,
        dataType: "json",
        async: true,
        success: function(json_response) {
            $.each(json_response, function(key, data){ 
            deviceId = data.system.get_sysinfo.deviceId;
            rssi = data.system.get_sysinfo.rssi;
            relay_state = data.system.get_sysinfo.relay_state;
            alias = data.system.get_sysinfo.alias;
            mac = data.system.get_sysinfo.mac;

            $("label[for='" + deviceId + "'").text(alias); <- THIS WORKS OK
            $("label[for='" + deviceId + "'").attr('title', 'RSSI: ' + rssi); <- THIS WORKS OK

            DEBUGING WAS SET HERE:


            if(relay_state == 1){ 
                $("#" + deviceId).prop('checked', true);
                $("#" + deviceId).off('click');
                $("#" + deviceId).on("click", function(){ return confirm( a + " OFF?"); });
                $("#" + deviceId).off('change');  
                $("#" + deviceId).on("change", function(){ HandleHS100( deviceId , 'off' ); }); <------HERE is maybe the problem
                }
            else{
                $("#" + deviceId).prop('checked', false);
                $("#" + deviceId).off('click');
                $("#" + deviceId).on("click", function(){ return confirm( a  + " ON?"); });
                $("#" + deviceId).off('change');
                $("#" + deviceId).on("change", function(){ HandleXMLHS100( deviceId  , 'on' ); }); <------HERE is maybe the problem too
                }        

            });
        }
    }); 

When clicking elements and debuging the function parameter, it only contains deviceId value from 2nd loop occurrence.

ELEMENT HTML:

<input id="800663A7C2C71A3B5F38A68EB082C6A3171E85C4" data-value="800663A7C2C71A3B5F38A68EB082C6A3171E85C4" class="hs100" type="checkbox" style="position: relative; bottom: 1px;">

Anyone would be able to check this out for possible cause of this behaviour. I need to have all elements with unique onclick event function params.

Answer 1

Your main problem is that deviceId will have global scope, so the listeners you are registering on the events will use the latests values assigned to this variable when they are triggered. Try with the next changes:

$.ajax({
    type: "GET",
    url: "myfile.php",
    cache: false,
    dataType: "json",
    async: true,
    success: function(json_response)
    {
        $.each(json_response, function(key, data)
        { 
            var deviceId = data.system.get_sysinfo.deviceId;
            var rssi = data.system.get_sysinfo.rssi;
            var relay_state = data.system.get_sysinfo.relay_state;
            var alias = data.system.get_sysinfo.alias;
            var mac = data.system.get_sysinfo.mac;

            $("label[for='" + deviceId + "'").text(alias);
            $("label[for='" + deviceId + "'").attr('title', 'RSSI: ' + rssi);

            if (relay_state == 1)
            {
                $("#" + deviceId).prop('checked', true);

                $("#" + deviceId).off('click').on("click", function()
                {
                    return confirm(a + " OFF?");
                });

                $("#" + deviceId).off('change').on("change", function()
                {
                    HandleHS100($(this).attr('id') , 'off');
                });
            }
            else
            {
                $("#" + deviceId).prop('checked', false);

                $("#" + deviceId).off('click').on("click", function()
                {
                    return confirm(a + " ON?");
                });

                $("#" + deviceId).off('change').on("change", function()
                {
                    HandleXMLHS100($(this).attr('id'), 'on');
                });
            }
        });
    }
});