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. On Sun, Mar 8, 2015 at 6:31 AM, <[email protected]> wrote: > 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">×</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; > 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. > 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> > > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAPJYB1jrEyYCEKA6An%2B-Ex19ZzimJGTx29QOG_z5Z%2BxGrTZZvQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
