Проверка динамически созданного div с помощью jquery

Question

Я добавляю div динамически с наличием нескольких тегов ввода в div с id = "lessonDetails". Я пытаюсь проверить его с JQuery, код, как показано ниже:

HTML:

<div id="lessonDetails"> 
    <div class="greenshades"> 
     <input name="addlesson"/> 
     <input name="addsubject"/> 
    </div> 
    <div class="greenshades"> 
     <input name="addlesson"/> 
     <input name="addsubject"/> 
    </div> 
    <div class="greenshades"> 
     <input name="addlesson"/> 
     <input name="addsubject"/> 
    </div> 
</div> 
<input type="button" onclick="validate()"/> 

JQuery:

function validate() { 
    if ($('#lessonDetails').children().length > 0) { 

     $('#lessonDetails').children().each(function(){ 

      $(this).each(function() {    

       $('input[name="addlesson"]').each(function() { 
        if($(this).val() == "") { 
         alert("Please enter lesson title."); 
         return false; 
        } 
       }); 

       $('input[name="addsubject"]').each(function() { 
        if($(this).val() == "") { 
         alert("Please enter subject."); 
         return false; 
        } 
       }); 

      }); 
     }); 
    } 
} 

Это не работает правильно. Он дает более одного оповещения во время.

Answer 1

$(this).each( не имеет никакого смысла.

$('#lessonDetails').find('input[name="addlesson"]').each(function() { 

    if ($(this).val() == "") { 
    alert("Please enter lesson title."); 
    return false; 
    } 
}); 

Я нахожу все вложенное 'input[name="addlesson"]' и итерацию над ними, остальная часть логики же так это будет делать трюк.

Answer 2

Вам не нужно несколько each(), измените функцию Validate в

function validate() { 
    var valid = true; 
    $('#lessonDetails input[name="addlesson"]').each(function() { 
     if ($(this).val() == "") { 
      alert("Please enter lesson title."); 
      valid = false; 
      return false; //break loop only 
     } 
    }); 
    return valid; 
} 

использовать возвращаемое значение

<input type="button" onclick="return validate()"/>