Перебор элементов, добавленных на лету

Question

Если, например, у меня есть следующая структура HTML

<ul class="actions"> 
    <li class="action">Action 1</li> 
    <li class="action">Action 2</li> 
    <li class="action">Action 3</li> 
</ul> 

А на следующий JavaScript

$('.actions .action').each(function() { 
    perform an ajax request // intended pseudocode 
    if ajax returns some more actions { // intended pseudocode 
      $('.installer-actions').append('<li class="action">Another Action</li>'); 
    } 
}); 

Добавленная <li class="action"> элементы не включены в each() очевидно. Есть ли способ, которым я могу вовлечь их в текущий цикл, или мне нужно будет снова прокрутить и проигнорировать исходные элементы .action?

Answer 1

Вы не можете добавить их на объект, each выполняет итерацию (the documentation не говорит, что произойдет, если вы add существующего набора, поэтому мы не можем полагаться на то, что он делает в данный момент), но вы можете достаточно легко разбить свой код на функцию, которую вы можете вызвать как в мест:

$('.actions .action').each(doCoolThing); 
function doCoolThing() { 
    var newAction; 

    // perform an ajax request // intended pseudocode 
    if (ajax_returns_some_more_actions) { // intended pseudocode 
     newAction = $('<li class="action">Another Action</li>'); 
     $('.installer-actions').append(newAction); 
     doCoolThing.call(newAction[0]); 
    } 
} 

Здесь мы вызываем doCoolThing на новое действие, делая this в вызове нового необработанного элемента DOM (как и each).

Следует отметить, что ваш запрос ajax будет асинхронным (если вы не установили async на false, что является плохим решением), что может повлиять на то, как вы структурируете вещи. Мы должны увидеть реальный код для псевдо-кода выше, чтобы помочь там, но концепция выше звучит.

Answer 2

Это не может быть включено в первоначальном наборе соответствующих элементов, однако вы можете создать элемент, настроить слушатель и т.д., а затем добавить его:

if ajax returns some more actions { // intended pseudocode 
    var element = $('<li class="action">Another Action</li>'); 
    element.someMethods(); 
    $('.installer-actions').append(element); 
}