# Can't reference variable in template event handler

**URL:** <https://discourse.aurelia.io/t/cant-reference-variable-in-template-event-handler/531>\
**Category:** Help Requests\
**Created:** [December 14, 2017, 2:29pm UTC](https://discourse.aurelia.io/t/cant-reference-variable-in-template-event-handler/531 "2017-12-14T14:29:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![eric](https://avatars.discourse-cdn.com/v4/letter/e/898d66/32.png) [@eric](https://discourse.aurelia.io/u/eric)\
**Post date:** [December 14, 2017, 2:29pm UTC](https://discourse.aurelia.io/t/cant-reference-variable-in-template-event-handler/531/1 "2017-12-14T14:29:39Z")

</div>

I cannot get any events to fire if I reference a variable in the event declaration. This is from my template. Everything works if the onclick event handler does not reference a binding:

`<img onclick="alert(this.id)" id="thumbnail_${ imageInfo.imageInfoId }" />`

But if I change the event handler to reference a bound variable, the event is never fired:

`<img onclick="alert('thumbnail_${ imageInfo.imageInfoId }')" id="thumbnail_${ imageInfo.imageInfoId }" />`

I am super new to Aurelia, so there is a lot I do not know. Can someone help explain why this does not work and what I should be doing instead? Thank you.

**Update:**  
OK, I can use click.delegate to call a method in my TypeScript, but I am finding that “’${ imageInfo.imageInfoId }’” is passing this literal string, not the resolved value from the binding. How can I get the bound value from the event handler?

`<img click.delegate="imageClicked('${ imageInfo.imageInfoId }')" id="thumbnail_${ imageInfo.imageInfoId }" />`

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [December 14, 2017, 2:38pm UTC](https://discourse.aurelia.io/t/cant-reference-variable-in-template-event-handler/531/2 "2017-12-14T14:38:49Z")

</div>

You do not need the on prefix for Events. I’d recommend looking through the getting started example in the Docs to get up to speed with the basics.

---

<div class="post-metadata">

**Author:** ![eric](https://avatars.discourse-cdn.com/v4/letter/e/898d66/32.png) [@eric](https://discourse.aurelia.io/u/eric)\
**Post date:** [December 14, 2017, 3:07pm UTC](https://discourse.aurelia.io/t/cant-reference-variable-in-template-event-handler/531/3 "2017-12-14T15:07:26Z")

</div>

I am digging through the docs, but haven’t found my answer, yet. Removing the “on” from the event name did not do the trick.

---

<div class="post-metadata">

**Author:** ![stsje](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stsje/32/1418_2.png) [@stsje](https://discourse.aurelia.io/u/stsje)\
**Post date:** [December 14, 2017, 3:27pm UTC](https://discourse.aurelia.io/t/cant-reference-variable-in-template-event-handler/531/4 "2017-12-14T15:27:22Z")

</div>

Read these two 🙂  
[http://aurelia.io/docs/binding/basics#dom-events](http://aurelia.io/docs/binding/basics#dom-events)  
[http://aurelia.io/docs/binding/delegate-vs-trigger](http://aurelia.io/docs/binding/delegate-vs-trigger)

---

<div class="post-metadata">

**Author:** ![eric](https://avatars.discourse-cdn.com/v4/letter/e/898d66/32.png) [@eric](https://discourse.aurelia.io/u/eric)\
**Post date:** [December 14, 2017, 11:45pm UTC](https://discourse.aurelia.io/t/cant-reference-variable-in-template-event-handler/531/5 "2017-12-14T23:45:49Z")

</div>

I never did manage to figure out how to pass ‘thumbnail\_${ imageInfo.imageInfoId }’ as a value into an event handler method. What I did manage to do is pass $event to click.delegate and from there inspect the data- properties on the event target, which allowed me to piece together the information that I needed programmatically.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [December 15, 2017, 1:46am UTC](https://discourse.aurelia.io/t/cant-reference-variable-in-template-event-handler/531/6 "2017-12-15T01:46:08Z")

</div>

from your code, it should be:

```auto
<img
  click.delegate="imageClicked( imageInfo.imageInfoId )"
  id="thumbnail_${ imageInfo.imageInfoId }" />

```

There is no need to wrap in a string