динамически получать размер списка внутри каждого метода

Question

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

счетчик должны возвращать количество элементов списка в раздел

также скрипка создала здесь: http://jsfiddle.net/Dqf8B/

<section id="questionOne"> 
       <span class="surveyQuestion"></span> 
       <form> 
        <input> 
        <a class="button">Add</a> 
       </form> 
       <p class="helperText">drag to prioritize</p> 
       <ol class="draggable answers"> 
       </ol> 
      </section> 

      <section id="questionTwo"> 
       <span class="surveyQuestion"></span> 
       <form> 
        <input> 
        <a class="button">Add</a> 
       </form> 
       <p class="helperText">drag to prioritize</p> 
       <ol class="draggable answers"> 
       </ol> 
      </section> 

function checkIfHelperIsNeeded(counter) { 
    if(counter == 2){ 
     helperText.slideToggle(function(){ 
      $(this).fadeIn(); 
     }) 
    if (counter < 2) { helperText.hide(); }; 
    } 
} 

$('.button').each(function(){ 
    var counter = $(this).parent("form").parent("section").find("ol").size(); 
    console.log(counter); 
    $(this).click(function(){ 
     if(counter <= 5) { 
      checkIfHelperIsNeeded(counter); 
      var myCurrentInputTags = $(this).parent('form').children('input').val(); 
      var li = $('<li class="tag">'+myCurrentInputTags+'</li>'); 
      $('<span class="close"></span>').on('click', removeParent).prependTo(li); 
      $(this).parent('form').parent('section').children('.draggable').prepend(li); 
     } else { alert("only 5 answers per question allowed")} 
    }); 
}) 

function removeParent() { 
    $(this).parent().fadeOut(function() { 
     $(this).remove(); 
    }); 
} 

var helperText = $(".helperText"); 
helperText.hide(); 

Answer 1

В настоящее время появляется вы работаете функция each() только один раз, когда этот сценарий первые нагрузки. Таким образом, вы не должны ожидать, что он подберет любые изменения, сделанные динамически в DOM.

Затем вы настраиваете функцию onclick для сравнения значения counter (которое всегда будет последним вычисленным значением для последней кнопки), в отличие от другой кнопки. Поэтому по существу после запуска each()counter имеет статическое значение, которому будут сопоставляться все кнопки во время click(). Я предполагаю, что это не то, что вы намеревались.

Возможно, вы должны просто рассчитать размер ol в функции click(), так как вы ничего не получаете от использования этой переменной counter.