Selector still unreachable after adding those into the DOM

[axdrv]

Hello. Sorry this is not an issue, but question how this organized in sammy.js.

This is a template:

<div class="card">
    <div class="card-image">
        <img src='/img/<%= lesson %>/0.jpg' alt='lesson_img'>
    </div>  
</div>

this code in main.js file

this.get('#/school', function(context) {
                context.app.swap('');
                context.render('/pages/school/school_page.html').appendTo(context.$element())
                    .then(function() {
                        $.each(context.lessons.novices, function(id, lesson) {
                            context.render('/templates/lesson_card.template', { id: id, lesson: lesson }).appendTo($('.novices'));
                        });
       });
});

Inside the school_page.html I have container with class .novices, where the template with data is placed to.
This works fine, hovewer I cannot get list of .card, because all tries to log it invokes before context is executed.
console.log($('.card')) gives Object { length: 0, prevObject: {…} } either I use second .then or this.after(). When i check $('.card') in the console, after all being rendered I have list of elements as I want to. The deal, I want bind event (click) to all of .cardelements, as soon as they have inserted. Please, advise (^-')