0

В id="convert-json-to-html-tree-sets" подгружаю форму с инпутами и кнопками к каждому инпуту

<div id="ikz-settings-sets">
 <div id="convert-json-to-html-tree-sets"></div>

Есть подключаемый файл к странице с ф-цией генерации нужной структуры htmlдля id="ikz-settings-sets"

Сама ф-ция

     function convertJsonToHtmlTree_Sets(obj, typeOfDevice,
     nameOfKey,    initialMasDeviceSettings, ikz35Key) {
               var huck.push(nameOfKey + key);
   var str = str +'<input id="' + nameOfKey + key + '"  >' + '</div>' +      
      '<div id="settings-for-device-' + nameOfKey + key +   '"' + 
    'class="button-other"></div>';       


                    return str;

                   }

На странице вызываю эту ф-цию

   $('#convert-json-to-html-tree-sets').append( convertJsonToHtmlTree_Sets(result.device_settings.bonding, typeOfDevice, '', initialMasDeviceSettingsSets) );

Мне необходимо, чтобы при клике кнопке добавлялся нужный класс ".button-not-press"

  for ( var i = 0; i < huck.length; i++ ) {
        var huck2 = $('#settings-for-device-' + huck[i]);

            $('#ikz-settings-sets input').on('input', function() { 
                        $(this).addClass('changedInput'); 

                            currentDeviceSettingsSets = ( $('#ikz-settings-sets').get(0).outerHTML ); 


                            if ( initialDeviceSettingsSets != currentDeviceSettingsSets ) { 


                                    $('#settings-for-device-' + huck[i]).addClass('button-not-press'); 
                            } else { 
                                    $('#settings-for-device-' + huck[i]).removeClass('button-not-press'); 
                            }   

                    }); 

                }
3
  • 3
    Очень читаемый код
    – user298256
    14 авг 2019 в 13:52
  • $('#ikz-settings-sets input').on('input', function() { замените на $('#ikz-settings-sets').on('input', 'input', function() {
    – InDevX
    14 авг 2019 в 13:53
  • Не срабатывает, ..именно здесь в этой стр-ре и ломается 14 авг 2019 в 14:07

1 ответ 1

0

Проблема в коде заключается в том, что навешивание события через запись -

$('#ikz-settings-sets').on('input', function() {})

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

$('#ikz-settings-sets input').on('input', 'input', function(event) {...})

в таком варианте записи событие будет проверяться динамически для всех элементов. От себя я бы рекомендовал вешать событие не на сам тег input а создать для этого отдельный classname и использовать его.

3
  • видимо, что то делаю не так. добавил вашу запись. Добавление класса кнопке не происходит. 14 авг 2019 в 14:19
  • Добавление к тегу класса происходит $(this).addClass('changedInput'); но кнопке нет; 14 авг 2019 в 14:23
  • не рекомендую использовать this. Попробуйте так event.target.classList.add('chandeginput')
    – DStrokov
    14 авг 2019 в 15:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.