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

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 переменная.