jQuery: Выполнение чего-то на статичных и динамически создаваемых элементах (делегированные события)

Question

Когда я загружаю страницу, у меня есть некоторые «статические» HTML-теги с определенным классом с именем .file_item в контейнере с именем #files_container. Позже на той же странице, без обновления, я добавляю (добавление) через Ajax new .file_item. Простой $ .ajax - отлично работает.

Моя проблема в том, что тогда я хочу выполнить событие on click по этим элементам.

Я знаю, что проблема - я знаю как решить эту проблему, но я считаю, мой подход крайне некрасиво. Я знаю о делегированных событий (http://api.jquery.com/on/#direct-and-delegated-events), и я знаю, что запуск:

$('.file_item').click(function() { 
    // will work on static elements but won't work on "dynamic" elements appended via Ajax. 
}); 

против

$('#files_container').on('click', '.file_item', function() { 
    // won't work on static elements but will work on "dynamic" elements appended via Ajax. 
}); 

Наконец мой вопрос: Как совместить эти два вместе так, то независимо от того, если .file_item сделал существуют, когда я загрузил страницу или был добавлен через 15 минут через Ajax, мой код внутри скобок будет выполнен?

Edit:

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

<section id="files_container"> 
    <section class="file_item">file 1</section> 
    <section class="file_item">file 2</section> 
    <section class="file_item">file 3</section> 
    <section class="file_item">file 4</section> 
    <section class="file_item">file 5</section> 
</section> 

Дополнительные файлы будут предваряться с помощью Ajax.

<section id="files_container"> 
    <section class="file_item">new one injected via prepend by $.ajax</section> 
    <section class="file_item">file 1</section> 
    <section class="file_item">file 2</section> 
    <section class="file_item">file 3</section> 
    <section class="file_item">file 4</section> 
    <section class="file_item">file 5</section> 
</section> 

Answer 1

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

Answer 2

Я думаю, что проблема статические элементы не являются потомком files_container элемента, поэтому делегированное обработчик не работает для него.

Таким образом, решение состоит в том, чтобы найти общий родительский элемент между статическим и динамическим элементами и связать с ним делегированный обработчик. Так как вы не поделили разметку, ниже я привязки обработчика к объекту документа, который должен обрабатывать как дела

$(document).on('click', '.file_item', function() { 
    // your code here 
});