How to add an event to a button created by repeat into a template?

[juan...@gmail.com]

Hi, I can't add an event to a button that ID was created by a var {{ id }}. I'm trying to find this ID by jquery selectors, but I can't find it.

I want to show the element named id="desc{{ i }} when the  id="button{{ i }}" was clicked.

Is this possible?

<polymer-element name="encabezado-cuestionario" attributes="tema">

<template>

   <descripcion-wikipedia id="descrip" descripcion="{{descripcion}}"> </descripcion-wikipedia> 

   

   <template id="template" repeat="{{desc, i in descripcion}}">

     <div id="button{{i}}" class="bloque btn btn-primary btn-large">

           

           <div class="pregunta"> {{desc}} </div>

    

   <div id="desc{{i}}" class="modal fade enshadow"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

 <div class="modal-dialog">

   <div class="modal-content">

     <div class="modal-header">

       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

      <h4 class="modal-title" id="myModalLabel">Beca</h4>

     </div>

     <div class="modal-body">

    Contenido de la beca

     </div>

     <div class="modal-footer">

       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

       <button type="button" class="btn btn-primary">Save changes</button>

     </div>

   </div>

 </div>

</div>

             </div>

        

         </template>    

     

 

 </template>    

      

  <script>

    

   

          Polymer('encabezado-cuestionario',{

     

      ready: function(){

       

    var shadow = this.$.template;  

      var shadow2 = shadow.$;

                    console.log('polymer element',shadow2);

      var myTemplate = document.getElementById('boton0');

          console.log('myTemplate',myTemplate);

     var shadow = $('#boton0').click(launch);

     function launch(){

$('#myModal').modal('show');

}

      

  this.addEventListener("click", function(){

$(this.querySelector("#desc0")).modal('show');

  });

 

}

             });

     

  </script>

</polymer-element>

[Elliott Sprehn]

I'd suggest putting a <div on-click="{{ handleClick }}"> around the <template repeat>. In the handleClick method you can then look at the event.target and use .closest() to find the enclosing button by class name doing something like .closest(".btn").

You could also put on-click on the button itself inside the repeat, but that will add a lot of event listeners which will be slower.

The <template repeat> actually puts the repeated things as siblings. You don't really want to add ids to the template usually.

 

 

      var shadow2 = shadow.$;

The <template> doesn't have a ShadowRoot and isn't a polymer element so there's no $ to get. You also don't really want to reach into the inside of elements.

 

                    console.log('polymer element',shadow2);

      var myTemplate = document.getElementById('boton0');

This won't work because the <button> is inside the ShadowRoot of the encabezado-cuestionario element.