How to trigger events inside a widget?

Question

I have created a widget and template regarding to that, and listed the events inside that widget but events are not getting triggered after clicking on the respected button.

Note:init and start functions are working

This is the xml file for the template

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<div t-name="new_template">
    <br/><br/>
    <div class="counter">
    <center>
        <br/>
        <button class="btn-info btn-lg " id="inc" >+</button>
        <button class="btn-info btn-lg value">0</button>
        <button class="btn-info btn-lg " id="dec">-</button>
    </center>
</div>
</div>
</templates>

THis is the Js file

odoo.define('registration_form.A', function (require) {
 "use strict";
var AbstractAction = require('web.AbstractAction');
var core = require('web.core');
var Widget=require('web.Widget');
var count=0;

var actionname = AbstractAction.extend({
template: 'new_template',
start:function(){
    console.log("start is called");
    this._super.apply(this,arguments);
    var myWidget=new MeterWidget();
    myWidget.appendTo(this.$el.find(".counter"));
    console.log(this.$el.find(".counter"));
    },
});
var MeterWidget=Widget.extend(
{
    'init':function(){
        console.log("init is called");
    },
    events:{'click #inc':'increase','click 
#dec':'decrease'},

    increase:function(e)
    {
        console.log("increment function is called");
        count++;
        this.$el.find(".value").val(count)
    },
    decrease:function(e){
        console.log("decrement function is called");
        count--;
        this.$el.find(".value").val(count)
    }
});
core.action_registry.add('my_action_tag', actionname);
});

Answer 1

Try out these changes,

var MeterWidget=Widget.include({

    'init':function(){
       this._super.apply(this, arguments);
       console.log("init is called");
     },