Mat Zero Mat Zero - 1 year ago 89
Javascript Question

Emberjs div does not fire click event action

I'm pretty new to Ember but this one seems very strange.

I've got a div on a template looking like so:

<div {{action "selectItem" item target="controllers.items"}}> Hello there! </div>

On my controller I have a simple action callback:

WebComponent.ItemController = Ember.ArrayController.extend(Ember.Evented, {
needs: ["settings"],

actions: {
selectItem: function (item) {
//This here won't fire unless I attach it to a <button> not a <div>

refreshList: function () {

} ...

In full disclosure, I am working inside Phonegap with the emulator.
Any ideas or even directions where to take this investigation?

Answer Source

I figured out the problem. It seems that Ember does not translates click events to touch events automatically (Ember 1.8) for tags like divs, spans, li, etc. It seems to do so for tags like button. So the solution for this is to add an attribute to map the event to the action. Use the on attribute with your action.

<div {{action "selectItem" item on="touchEnd" target="controllers.items"}}> Hello there! </div>