JSON Динамическое размещение событий onclick от JQUERY

Question

У меня есть следующий код для добавления динамически единственного значения JSON 'deviceId' к

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

Цикл выполняется дважды, и случается, что нижеприведенная функция HandleHS100 содержит только значение JSON deviceId из последнего прохода цикла.

Но отладка показывает, что цикл обрабатывается корректно, и каждый цикл содержит уникальный идентификатор устройства:

цикл 1: json deviceId: 800663A7C2C71A3B5F38A68EB082C6A3171E85C4

цикл 2: json deviceId: 800450F0381F8381328111321108371321108371108371321103S1 8381108381103S1108103S1 8381108103S1 8381108383103S1103S1018103103S1803S1102S1103S1103S1

похоже, что проблема заключается в выделении параметра deviceId для прослушивателя onclick.

$.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
                }        

            });
        }
    }); 

При выборе элементов и отладке параметра функции он содержит только значение deviceId из вхождения второго цикла.

ЭЛЕМЕНТ HTML:

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

Любой желающий может проверить это на предмет возможной причины такого поведения.Мне нужно иметь все элементы с уникальными параметрами функции события onclick.

Answer 1

Ваша основная проблема в том, что deviceId будет иметь глобальную область видимости, поэтому слушатели, которых вы регистрируете для событий, будут использовать последние значения, назначенные этой переменной, при их срабатывании.Попробуйте со следующими изменениями:

$.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');
                });
            }
        });
    }
});