Javascript/jQuery слушатель не работает с шаблонами Underscore.js

Question

Я создаю веб-приложение, используя underscore.js для создания шаблонов. Дело в том, что когда я рендеринг простого шаблона, как это:

<div id="container"></div>

<script type="text/template" id="person-template">
    <% person.forEach(function(p) { %>
        <a class="username"> <%= p.username %> </a>
    <% }); %>
</script> 

<script type="text/javascript">
    var container = document.getElementById('container');
    var template = document.getElementById('person-template');
    var renderTemplate = _.template(template.innerHTML);

    container.innerHTML = renderTemplate({
        person: /* ajax object callback response ... */
    });
</script>

Если я пытаюсь использовать идентификатор человека, чтобы сделать что-то с моим JavaScript. Функция не работает, и на консоли нет ошибок. Пример:

$('.username').click( function() {
    console.log('hello!');
});

Я также попробовал это, но это не работает:

• $(document).ready( function...
• $(container).find('.username').on('click', function...
• Работает с window.setTimeout(funciton(){...},1500) но я хочу лучший способ сделать это.

Кстати, это очень простой пример, просто чтобы объяснить проблему.

Answer 1

Попробуй использовать:

$('body').on('click', '.username', function(e) {
    console.log('hello!');
});

Это будет работать для всех элементов с классом 'username' в теле, независимо от того, присутствуют они или добавляются динамически позже.