title: Binding click event in aurelia
body: <p>I have a component ButtonHtml that intercepts click events so that it can publish the event to a component that prevents clicking on something more than once to keep from double-clicking. It was working prior to upgrading the aurelia-framework.</p>
  
  <p>Now I get this error. I'm not sure why.</p>
  
  <blockquote>
    <p>ButtonHtml.js:51 TypeError: this.click is not a function
        at ButtonHtml.buttonClick (ButtonHtml.js:47)
        at CallScope.evaluate (aurelia-binding.js:1542)
        at Listener.callSource (aurelia-binding.js:5119)
        at Listener.handleEvent (aurelia-binding.js:5128)</p>
  </blockquote>
  
  <p>Here is the Html and JS</p>
  
  <pre><code>&lt;template&gt;
      &lt;button class="${class} waves-effect btn btn-${isSelected ? 'selected' : type} ${isBlock ? 'btn-block' : ''}" click.trigger="buttonClick()" title="${title}" disabled.bind="disabled"&gt;
          &lt;span class.bind="labelVisibility === '' ? '' : labelVisibility" if.bind="label !== ''"&gt;${label}&lt;/span&gt;
          &lt;i if.bind="icon !== ''" class="material-icons ${label !== '' ? iconLocation : ''}"&gt;${icon}&lt;/i&gt;
      &lt;/button&gt;
  &lt;/template&gt;
  
  import {bindable, bindingMode, containerless, inject} from 'aurelia-framework';
  import {EventPublishingService} from '../../Service/EventServices/EventPublishingService';
  
  @containerless()
  @inject(EventPublishingService)
  export class ButtonHtml
  {
      constructor(eventPublishingService)
      {
          this.eventPublishingService = eventPublishingService;
      }
  
      /**
       * Style bindings
       */
      @bindable label = '';
      @bindable labelVisibility = '';
  
      @bindable icon = '';
      @bindable iconLocation= 'left';
  
      @bindable class = '';
      @bindable({ defaultBindingMode: bindingMode.twoWay }) type = 'primary';    
      @bindable({ defaultBindingMode: bindingMode.twoWay }) isSelected = false;
      @bindable isBlock = false;
      @bindable disabled = false;
  
      /**
       * Events
       */
      @bindable click;
  
      /**
       * Native properties
       */
      @bindable title = '';
      @bindable isBlocking = false;
  
      buttonClick()
      {
          if (this.isBlocking)
          {
              this.eventPublishingService.disableActions();
          }        
  
          try{
              this.click();
          }
          catch(exception)
          {
              console.error(exception);
          }
      }
  }
  </code></pre>
  
  <p>This is a typical use:</p>
  
  <pre><code>&lt;button-html type="action" icon="done" label="OK" tap.call="Go()"&gt;&lt;/button-html&gt;
  </code></pre>
  
  <p>Here are the aurelia library versions</p>
  
  <blockquote>
    <p>"aurelia-animator-css": "1.0.3", "aurelia-bootstrapper": "2.1.1",
    "aurelia-dialog": "1.0.0-rc.1.0.3", "aurelia-fetch-client": "1.1.3",
    "aurelia-framework": "1.1.5", "aurelia-materialize-bridge": "~0.31.0",
    "aurelia-pal-browser": "1.3.0", "aurelia-polyfills": "1.2.2",
    "aurelia-router": "1.4.0", "aurelia-templating": "1.5.0",
    "aurelia-templating-binding": "1.4.0", "aurelia-templating-resources":
    "1.5.1", "aurelia-templating-router": "1.2.0", "aurelia-validation":
    "1.1.2",</p>
  </blockquote>
  
  <p>Edit: </p>
  
  <p>Got it working by changing the usage to click.call instead of tap.call</p>
  
  <pre><code>&lt;button-html type="action" icon="done" label="OK" click.call="Go()"&gt;&lt;/button-html&gt;
  </code></pre>