Accessing parent 'onRendered' js code from childern generated in each statement

help
1

I am quite new to Meteor and Blaze so I am sorry if something is unclear here… But I want to implement this ‘Product Quick View’ https://codyhouse.co/gem/css-product-quick-view/ in my Meteor project.

The animation is working great when I am not using each statement. In each statement the data context change and when I click cd-trigger nothing happens. How can I access the code inside ParentTemplate.onRendered for this child Template? Is there some workaround to this problem?

<template name="ParentTemplate">
   {{> Product}} // works properly

   {{#each products}} // does not work
     {{> Product}}
   {{/each}}
</template>

<template name="Product">
  <li class="cd-item">
     <img src="img/item-1.jpg" alt="Item Preview">
     <a href="#0" class="cd-trigger">Quick View</a>
  </li> <!-- cd-item -->
</template>

and the .js file

Template.ParentTemplate.onRendered( function () {
//open the quick view panel
$('.cd-trigger').on('click', function(event){
    console.log('Hello!');
    var selectedImage = $(this).parent('.cd-item').children('img'),
        slectedImageUrl = selectedImage.attr('src');

/the code continues but it is very long/