# Clicking element doesn't fire click event

**URL:** <https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509>\
**Category:** CanJS\
**Created:** [December 15, 2016, 6:50pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509 "2016-12-15T18:50:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![DrecDroid](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/drecdroid/32/214_2.png) [@DrecDroid](https://forums.bitovi.com/u/DrecDroid)\
**Post date:** [December 15, 2016, 6:50pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/1 "2016-12-15T18:50:57Z")

</div>

Hi I’m new to canjs, I have tried the examples in the chat guide in JsBin and they work fine. The problem comes when I try to run them in my own development environment.

I’ve tried many ways:

- Using webpack with es6, stage-2 presets enabled, and requiring the template with raw-loader.

- Using webpack without presets but requiring the template with raw-loader

- Using webpack without presets but the template as a string pasted inside the js file.

template.hbs

> ```
> <div class="container">
> <div class="row">
> <div class="col-sm-8 col-sm-offset-2">
> <h1 id="click-this" class="page-header text-center" ($click)="addExcitement()" >
> {{message}}
> </h1>
> </div>
> </div>
> </div>
> 
> ```

It works fine in jsBin:

> **[JS Bin](https://jsbin.com/vahimobepe/edit?js,output)**
>
> A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

This is almost the same code.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [December 15, 2016, 8:45pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/2 "2016-12-15T20:45:46Z")

</div>

Just to clarify, the webpack example doesn’t call `addExcitement()` when you click the `h1`?

We’ll check it out today hopefully.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [December 15, 2016, 8:47pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/3 "2016-12-15T20:47:20Z")

</div>

What browser are you using and version of webpack?

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [December 15, 2016, 8:48pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/4 "2016-12-15T20:48:10Z")

</div>

Hi @DrecDroid, I’m sorry it’s not working for you, but we should be able to sort it out.

Which version of webpack are you using? Any chance your setup is in a GitHub repo that I could check out?

---

<div class="post-metadata">

**Author:** ![DrecDroid](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/drecdroid/32/214_2.png) [@DrecDroid](https://forums.bitovi.com/u/DrecDroid)\
**Post date:** [December 15, 2016, 9:46pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/5 "2016-12-15T21:46:57Z")

</div>

Webpack version is 1.14.0.  
Browser : Chrome 55.0.2883.87 m.

I can call the ViewModel method and the {{message}} is modified in the view. But when I click the h1 the click method is not called.

appVM.addExciment() works fine, the view updates with the new message value. The problem is with the click event that doesn’t call the addExciment method.

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [December 15, 2016, 11:03pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/6 "2016-12-15T23:03:35Z")

</div>

@DrecDroid, your code looks good; I was able to duplicate the issue in a (simplified) example app: [https://github.com/chasenlehara/canjs-webpack-example/tree/forum-post-509](https://github.com/chasenlehara/canjs-webpack-example/tree/forum-post-509)

It looks like the global version of `can` used in the JS Bin is working correctly, but using the `can-*` modules isn’t, so we’re working through that bug right now. I’m hoping to have another update for you soon.

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [December 15, 2016, 11:20pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/7 "2016-12-15T23:20:53Z")

</div>

The issue is that the binding syntax `($click)` is part of the `can-stache-bindings` module, so you’ll need to install it and require it for the click to work correctly.

Install: `npm install can-stache-bindings --save`

Then in your JS file:

```auto
require("can-stache-bindings");

```

I’ve updated my example to show it working: [https://github.com/chasenlehara/canjs-webpack-example/blob/forum-post-509/main.js](https://github.com/chasenlehara/canjs-webpack-example/blob/forum-post-509/main.js)

---

<div class="post-metadata">

**Author:** ![DrecDroid](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/drecdroid/32/214_2.png) [@DrecDroid](https://forums.bitovi.com/u/DrecDroid)\
**Post date:** [December 15, 2016, 11:51pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/8 "2016-12-15T23:51:54Z")

</div>

Oh, thanks, was not clear in the guide. But isn’t supposed that ‘can-stache-bindings’ be internal to ‘can-stache’?.

---

<div class="post-metadata">

**Author:** ![pYr0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/pyr0x/32/95_2.png) [@pYr0x](https://forums.bitovi.com/u/pYr0x)\
**Post date:** [December 16, 2016, 8:31am UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/9 "2016-12-16T08:31:57Z")

</div>

even for me, that seems unclear.  
i supposed, as DrecDroid, that if i include can-stache that all live-binding stuff will also included.

for me it makes no sense that if you are using `stache` you dont want using live two- or one-way-binding or clickevents.

for me, can-stache-bindings should be included in can-stache by default.  
it is totally ok, that ´can-stache-bindings` is a own module!

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [December 16, 2016, 2:14pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/10 "2016-12-16T14:14:56Z")

</div>

they are distinct by design. It allows us to support different binding syntaxes as requested when the new binding syntaxes were created.

can-stache simply provides live binding. Any other types of bindings are added to it.

---

<div class="post-metadata">

**Author:** ![DrecDroid](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/drecdroid/32/214_2.png) [@DrecDroid](https://forums.bitovi.com/u/DrecDroid)\
**Post date:** [December 17, 2016, 6:10pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/11 "2016-12-17T18:10:17Z")

</div>

At least when using live bindings without importing can-stache-bindings It could throw an informative warning in development mode. Or possibly could be imported dynamically calling for example `stache.useLiveBindings()` before any stache() call that uses live bindings.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [December 17, 2016, 11:21pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/12 "2016-12-17T23:21:18Z")

</div>

A warning about strange attributes would be great. We do the same thing for tags. Please create an issue in can-stache

---

<div class="post-metadata">

**Author:** ![pYr0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/pyr0x/32/95_2.png) [@pYr0x](https://forums.bitovi.com/u/pYr0x)\
**Post date:** [December 19, 2016, 10:41am UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/13 "2016-12-19T10:41:47Z")

</div>

But can-stache is not fully decoupled from can-stache-bindings  
See [https://github.com/canjs/steal-stache/blob/master/steal-stache.js#L27](https://github.com/canjs/steal-stache/blob/master/steal-stache.js#L27)

If you are using steal-stache, what we all do…, we always get can-stache-bindings.

---

<div class="post-metadata">

**Author:** ![matthewp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/matthewp/32/77_2.png) [@matthewp](https://forums.bitovi.com/u/matthewp)\
**Post date:** [December 19, 2016, 4:21pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/14 "2016-12-19T16:21:49Z")

</div>

I don’t see the distinction between live bindings and other types of bindings. There are a few types of bindings I can see existing:

- TextNode
- Attributes
- Properties
  - ViewModel which is really just a subset of property bindings.

- Events

These are the only things that exist in HTML/DOM. can-stache’s live bindings are really just TextNode bindings. I don’t understand the case where you would want stache’s TextNode bindings but not its attribute bindings. I would think that if you don’t want any one particular type of bindings you would want to replace the language all together. In [my templating engine](https://github.com/matthewp/weston) I don’t make a distinction between TextNode and other types. Would like to hear more about the use case here.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [December 19, 2016, 8:39pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/15 "2016-12-19T20:39:34Z")

</div>

I see a big distinction between Mustache + Handlebars bindings, which are used in TextNode, HTML, and attributes bindings like:

```auto
<div>{{textNode}}</div>
<div>{{#html}}....{{/html}} {{{alsoHTML}}}</div>
<div class="{{attributeOrProperty}}"/>
<div {{attributesOrProperties}}>

```

And everything else that has been “thrown on” with the addition of components (viewModels) `2.0` or alternate attribute/property/event bindings `2.3`.

There’s things that belong to the Mustache spec involved in 1 way binding … and then there’s everything else.

---

<div class="post-metadata">

**Author:** ![matthewp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/matthewp/32/77_2.png) [@matthewp](https://forums.bitovi.com/u/matthewp)\
**Post date:** [December 19, 2016, 10:05pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/16 "2016-12-19T22:05:25Z")

</div>

Ah, ok, so then really the issue here is that Stache is a text manipulation language, not an HTML manipulation language. In that context I think the distinction makes sense. can-stache is about manipulating text that will be (eventually) serialized into DOM Nodes. can-stache-bindings is about manipulating DOM Nodes.

Maybe can-stache-bindings should be renamed then? It is not necessarily tied to can-stache in any way that I can think of. can-view-target is what calls the callbacks. Maybe something like can-element-bindings?

---

<div class="post-metadata">

**Author:** ![Arjen\_Haayman](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Arjen\_Haayman](https://forums.bitovi.com/u/Arjen_Haayman)\
**Post date:** [September 22, 2017, 10:01am UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/17 "2017-09-22T10:01:26Z")

</div>

does this still apply? I’m having a hard time to get binding to work

Without importing ‘can-stache-bindings’ I get:

> log.js:102 WARN: can-stache/src/expression.js: Unable to find key or helper “value”.

then I tried

> import ‘can-stache-bindings’;

The module could not be found (even though it’s present under node\_modules/)

Then:

> npm install can-stache-bindings --save

and add some 3000+ files

Now I get these error messages:

> GET [http://127.0.0.1/SmartSewer/node\_modules/can-stache-bindings/node\_modules/can-event/package.json](http://127.0.0.1/SmartSewer/node_modules/can-stache-bindings/node_modules/can-event/package.json) 404 (Not Found)  
> GET [http://127.0.0.1/SmartSewer/node\_modules/can-stache-bindings/node\_modules/can-util/package.json](http://127.0.0.1/SmartSewer/node_modules/can-stache-bindings/node_modules/can-util/package.json) 404 (Not Found)  
> GET [http://127.0.0.1/SmartSewer/node\_modules/can-stache-bindings/node\_modules/can-view-scope/package.json](http://127.0.0.1/SmartSewer/node_modules/can-stache-bindings/node_modules/can-view-scope/package.json) 404 (Not Found)

What should be my next move???

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [September 26, 2017, 5:33pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/18 "2017-09-26T17:33:55Z")

</div>

Hi @Arjen_Haayman, could you check with the latest version of `can-stache-bindings` (3.9.1)? Are you using Browserify, StealJS, or webpack for module loading?

---

<div class="post-metadata">

**Author:** ![Arjen\_Haayman](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Arjen\_Haayman](https://forums.bitovi.com/u/Arjen_Haayman)\
**Post date:** [September 27, 2017, 7:00am UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/19 "2017-09-27T07:00:59Z")

</div>

I was on 3.9.0 and now on 3.9.2. I’m using StealJS

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [September 27, 2017, 7:57pm UTC](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509/20 "2017-09-27T19:57:30Z")

</div>

Ok, I wonder if there are actually multiple versions in your project. What does `npm ls can-stache-bindings` return? Also, what version of steal?

If you’re using `can-component`, you don’t have to have `can-stache-bindings` in your `package.json`, so removing it might be a fix.

[Next page](https://forums.bitovi.com/t/clicking-element-doesnt-fire-click-event/509.md?page=2)