Функция jQuery не работает для всех полей того же класса

Question

У меня есть следующий код jQuery, чтобы отключить кнопку отправки в форме, когда значения пустые. код работает отлично для всех записей, кроме .action_manager (который представляет собой textarea, сгенерированный динамически в таблице), в котором, заполняя только первую строку, кнопка включена. Я хочу, чтобы все поля заполнялись до перезапуска submitbutton. только один экземпляра action_manager достаточно, чтобы кнопка включена (что не то, что я хочу)

$('document').ready(function(){ 

     var submitButton = $('input[name="store_values"]'); 
     checkValues(); 

     $('select.actuallevel').on('change',function(){ 
      checkValues(); 
     }); 
     $('select.targetlevel').on('change',function(){ 
       checkValues(); 
      }); 
     $('select.quarter_manager').on('change',function(){ 
      checkValues(); 
     }); 
     $('select.year_manager').on('change',function(){ 
      checkValues(); 
     }); 

     $(".action_manager").each(function() 
     { 
      $(this).on('change',function(){ 
       checkValues(); 
      }); 
     }); 


     function checkValues(){ 
      submitButton.prop('disabled',$(".actuallevel > option:selected[value=''],.actuallevel:empty").length > 0 || 
       $(".targetlevel > option:selected[value=''],.targetlevel:empty").length > 0 || 
       $(".quarter_manager > option:selected[value=''],.quarter_manager:empty").length > 0 || 
       $(".year_manager > option:selected[value=''],.year_manager:empty").length > 0 || 
       !$.trim($(".action_manager").val()) 


      ); 
      //submitButton.prop('disabled',$(".targetlevel > option:selected[value=''],.targetlevel:empty").length > 0); 
     } 
    }); 

поля текстового поля выглядит следующим образом:

echo "<td><textarea class='action_manager' id='action-".$inf['Competence_ID']."' name='acto-".$inf['Competence_ID']."'>";if (isset($inf['actiontext'])){echo $inf['actiontext'];}echo "</textarea></td>"; 
    echo"<td>"; 

Answer 1

Учитывая, что вы вставили .action_manager динамически текстовые области, они когда ваш документ был загружен. Поэтому ваши прикрепленные события в текстовые поля .action_manager не будут активны для новых текстовых областей.

Вот правильный способ прикрепить события к новому и старому .action_manager прокручиваемым:

$(document).on('change','.action_manager',function(){ 
     checkValues(); 
    }); 

EDITED ОТВЕТ:

Используйте следующую функцию вместо

 function checkValues(){ 
      var action_managerfilled = true; 
      $(".action_manager").each(function(){ 
       if (!$.trim($(this).val())){ 
        action_managerfilled = false; 
        return false; 
       } 
      }); 
      submitButton.prop('disabled',$(".actuallevel > option:selected[value=''],.actuallevel:empty").length > 0 || 
       $(".targetlevel > option:selected[value=''],.targetlevel:empty").length > 0 || 
       $(".quarter_manager > option:selected[value=''],.quarter_manager:empty").length > 0 || 
       $(".year_manager > option:selected[value=''],.year_manager:empty").length > 0 || 
       !action_managerfilled 
      ); 
      //submitButton.prop('disabled',$(".targetlevel > option:selected[value=''],.targetlevel:empty").length > 0); 
     } 

Кажется, что $ ('. action_manager'). val() возвращает значение первой текстовой области только во всех случаях вместо проверки значений каждого текстового поля класса '.action_manager'; следовательно, функция .each() выше, чтобы исправить проблему.

Answer 2

вам нужно использовать on делегированное событие для динамически генерируемых элементов .. и вам не нужно использовать цикл $.each, селектор выбирает весь элемент, начинающийся с что класс ...

$(document).on('change','.action_manager',function(){ 
    checkValues(); 
}); 

однако она recommneded используйте ближайший статический родитель, который присутствует в документе, чем document самого