1

I'd gone through most of the solution for this issue but still couldn't solve it. Please help me guys. T.T My child event is not firing no matter how I configure it please guide me through it. My parent is 'dayInfo' and I'm calling 'schedule' from the parent. But the html button is not triggering the event.

///// schedule.html /////

<a class="ic-plus-circle add"></a>

///// schedule.js /////

define(function(require) {

var Backbone        = require('backbone'),
    User            = require('models/User'),
    css             = require('text!views/dayInfo/schedule.css'),
    tpl             = require('text!views/dayInfo/schedule.html');

return Backbone.View.extend({

    initialize: function(options) {

        this.template       = _.template(tpl);

        var self = this;

        return this;
    },

    render: function() {
        var self = this;

    self.$el.html(self.template());

        return this;
    },

    events: {

        'tap .add': function(e) {
            console.log('success');
            var self = this;
            var $this = $(e.currentTarget);

            console.log('tapped');                  
        }
    }
});
});

////// dayInfo.html /////

<div class="tab-content"></div>

////// dayInfo.js /////

define(function(require) {

var Backbone        = require('backbone'),
    ScheduleView    = require('views/dayInfo/schedule'),
    css             = require('text!views/dayInfo/dayInfo.css'),
    tpl             = require('text!views/dayInfo/dayInfo.html');

return Backbone.View.extend({

    id : 'dayInfo',

    initialize: function(options) {
        this.template               = _.template(tpl);

        var self = this;

        return this;
    },

    render: function() {
        var self = this;

        self.$el.html(self.template());

        self.$tabContent = self.$el.find('.tab-content');

        self.scheduleView = new ScheduleView({date:self.date,doctor:self.doctor,appointments:self.appointments,events:self.events}).render();
        self.$tabContent.html(self.scheduleView.$el);
    }
});
});

I was expecting the console to throw 'tapped' whenever I click the button

Flying Panda
  • 11
  • 1
  • `var self = this;` is completely useless everywhere you used it. It's one of the trick to keep the context when using function expression, but you're not using any callback. See [How to access the correct `this` inside a callback?](https://stackoverflow.com/q/20279484/1218980) – Emile Bergeron Jul 10 '19 at 15:31

1 Answers1

0

There is no such thing as tap event, which is why it's not firing. See MDN - Touch events for list of available touch events.

You'll need to get a touch event plugin what works with jQuery to have custom events such as tap

T J
  • 42,762
  • 13
  • 83
  • 138