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 () {
        //blah
    },
    ...
    }
},

... } ...

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

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 () {
        //blah
    },
    ...
    }
},

... } ...

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

• javascript
• jquery
• css
• cordova
• ember.js

• Obvious questions: Are you sure your controller is being used? Have you looked in Ember inspector? You change the div to button and THAT IS ALL and it works? Can you recreate this in a jsbin/fiddle? – Steve H. Commented Jul 6, 2015 at 21:59
• I'm pretty sure the controller is being used. As I mentioned if I change the above html from a div to button then the callback works. I will try to recreate this part in to fiddle but the project has native dependencies, let me see if I can carve out the js part alone and test that. – Mat Zero Commented Jul 6, 2015 at 22:05

3 Answers 3

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>

Some browsers/devices will not work properly with no-standard clickable DOM elements. Consider wrapping your <div /> with a link tag <a> and add the click event to the A element.

<a {{action "selectItem" item target="controllers.items"}}><div></div></a>

Second option (which worked for me for Safari on iPad is to just set the cursor to pointer.

<div style="cursor: pointer"></div>

This answer was on the ment of Vincent Gauthier https://github./emberjs/ember.js/pull/11373:

<button {{action 'process'}} {{action 'process' on="touchEnd"}}>Submut</button>

This was very helpful for me because when I try to put only on="touchEnd" it stopped working on desktop browser, so the multiple actions are the key